2020-10-20

点击按钮出现遮罩层与自定义弹窗的综合运用

第一步，先在HTML中新加一个空的div，用来做遮罩效果

<div class="mask"></div>

第二步，设置遮罩样式

.mask {
	position: absolute;/*定位为绝对定位*/
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;/*放在第二层，将第一层内容遮住*/
	background: #666;
	opacity: 0.5;/*透明度*/
	display: none; /*先设置为none不可见 */
}

第三步，在页面加入自定义弹窗

<div class="problem-nav" id="notice">
		<div class="top-nav">
			<span class="notice">请注意</span>
		</div>
		<div class="certen-nav">
			<div class="certen-messege">
				<span class="messege"></span>
			</div>
		</div>
		<div class="define">
			<input type="button" class="define-messege" value="确定">
		</div>
	</div>

第四步，设置弹窗样式

.problem-nav{
	position:absolute;
	height: 200px;
	width: 300px;
	border: 1px solid black;
	background-color: #fff;
	border-radius: 10px;
	display: none;
	margin: auto auto;
	z-index: 3;
	display: none;
}

最后一步，js控制点击后弹出

$("属性").click(function(){
function problem(){
            var $Popup = $('.problem-nav');
            $('.mask').css("display", "block");
            $Popup.css({
                left: ($('body').width() - $Popup.width()) / 2 + 'px',
                top: ($(window).height() - $Popup.height()) / 2 + $(window).scrollTop() + 'px',
                display: 'block'
            })
            $('.define-messege').click(function() {
                $('.mask,.problem-nav').css('display', 'none');
                return false;
               })
            }
            problem();
})