如何使JS弹出层后面的内容不被选中？

JavaScript019

如何使JS弹出层后面的内容不被选中？,第1张

这是因为你得弹出曾没有覆盖页面全部地方，把弹出层的位置设置为fixed，然后宽度和高度都设置为100%，至于iframe可以放置在中间合适的地方。

当鼠标点击发生的内层对象即没有处理也没有取消这个事件的时候，事件会向上冒泡知道有人处理为止。所以这可能就是点在空白部分后点到下面去了原因。解决办法有很多，你可以尝试在你的层里面捕获这个事件并取消冒泡，看看event.cancelBubble或者event.stopPropagation哪个可以生效，另外也可以尝试让弹出层所有地方都变得有内容，比如使用div填充到空白的地方覆盖整个屏幕。

 // 所有class='WeiboImporWrap' 的元素绑定点击事件

 $('.WeiboImporWrap').click(function(){

             // 所有class='WeiboImporWrap' 的元素隐藏

            $('.WeiboImporWrap').hide()

           

        })

<script type="text/javascript">

function showDiv(){

document.getElementById('popDiv').style.display='block'

document.getElementById('bg').style.display='block'

}

function closeDiv(){

document.getElementById('popDiv').style.display='none'

document.getElementById('bg').style.display='none'

}

</script>

<div id="popDiv" style="z-index:99display:noneposition:absolutemargin-top: 20%margin-left: 40%background-color: #FFF">

<h3>这里的html自己写，样式什么的自定义</h3>

<form action="#">

<p><span>账号：</span><input type="text"></p>

<p><span>密码：</span><input type="password"></p>

</form>

<br/>

<a href="javascript:closeDiv()">关闭遮罩层</a></div>

<div id="bg" style="display:nonebackground-color: #cccwidth: 100%position:absoluteheight: 100%opacity: 0.5z-index: 1"></div>

<div style="padding-top: 10%padding-left:40%z-index:1">

<input type="Submit" name="" value="打开遮罩层" onclick="javascript:showDiv()" />

</div>

效果图：