欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

单击按钮弹出一个页面,并使背景颜色变为灰色

程序员文章站 2022-06-01 23:37:06
...

当你单击新增按钮时,不需要切换页面,而是在页面上弹出一个新增页面,并使背景颜色变为灰色,效果如下:
单击按钮弹出一个页面,并使背景颜色变为灰色
单击按钮弹出一个页面,并使背景颜色变为灰色html:

<div class="Popup-MaskData">
			<div class="PopupData">
				<div class="currency-title">
					<span>新增账户</span>
				</div>
				<ul class="add-itme">
					<li>
						<span>账号:</span>
						<input type="text">
					</li>
					<li>
						<span>密码:</span>
						<input type="text">
					</li>
					<div class="but-war">
						<button type="button" style="width: 100%;background-color: #1494FE;border: #1494FE;color: #FFF;line-height: 25px;">保存<tton>
                    </div>
            </div>
         </div>

css

.Popup-MaskData {
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5);
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 9999999999999;
			display: none;
		}
		
		.PopupData {
			width: 300px;
			height: 200px;
			background-color: #FEFEFE;
			text-align: center;
			position: fixed;
			left: 40%;
			top: 35%;
		}

这样就可以做到点击新增按钮跳出新增列表

单击页面以外灰色区域和单击保存按钮隐藏新增列表

       $(document).click(function() {
		    $(".Popup-MaskData").hide();
	   })
		$("#xz").click(function() {
		     event.stopPropagation();//阻止任何父事件处理程序被执行,点击新增不会触发全局事件
		     $(".Popup-MaskData").show();
     	})
		$(".Popup-MaskData").click(function(){
			 event.stopPropagation();
		})
		$("#bc").click(function(){
			 $(".Popup-MaskData").hide();
		})