Question

使用以下代码创建弹出窗口，当弹出窗口显示父窗口中的链接处于活动状态时*如何在弹出窗口处于活动状态时使父页面处于非活动状态 CSS

.popup { position: fixed;background: rgba(255,255,255,.6); left: 25%; top: 25%; width: 50%; height: 350px; margin-top: -75px; background-color: #fff; border: 1px solid #ccc; border-radius: 5px;index: 1;}
        .popup .close {position: absolute; right: -5px; top: -5px; text-decoration: none; background-color: #c41e1e; color: #fff; line-height: 1; border-radius: 50px; width: 1em; text-align: center; z-index: 3;}
        h3 {margin: 0; padding: 5px 10px; background-color:#8AC007;}
        .mask {background-color: #000; z-index: 1; position: absolute; width: 100%; height: 100%; opacity: 0.5;}

HTML
<div class="popup">
        <h3>Select Your City</h3>
        <a href="#" class="close"
           onclick="document.querySelectorAll('.popup')[0].style.display = 'none';
                   document.querySelectorAll('.mask')[0].style.display = 'none';
                   return false;">&times;</a>
                        <p><h4>Major City's</h4>
        </p>
    </div>

只有popup应该处于活动状态，其他所有其他应该处于非活动状态

Answer 1

这是一个jQuery解决方案。

<style>
    .popup          { position: fixed;background: rgba(255,255,255,.6); left: 25%; top: 25%; width: 50%; height: 350px; margin-top: -75px; background-color: #fff; border: 1px solid #ccc; border-radius: 5px;index: 1; box-shadow: 2px 2px 10px rgba(0,0,0,0.6); }
    .popup .close   {position: absolute; right: -5px; top: -5px; text-decoration: none; background-color: #c41e1e; color: #fff; line-height: 1; border-radius: 50px; width: 1em; text-align: center; z-index: 3; cursor: pointer; padding: 2px 3px 3px 3px; }
    .popup .close:hover { background-color: #888; }
    h3              {margin: 0; padding: 5px 10px; background-color:#8AC007;}
    .mask           {background-color: #000; z-index: 1; position: absolute; width: 100%; height: 100%; opacity: 0.5;}
    #supawrap       { display: none; height: 100%; width: 100%; position: absolute; background-color: rgba(0,0,0,0.8); top: 0; left: 0; }
</style>
HTML
<div id="supawrap">
    <div class="popup">
        <h3>Select Your City</h3>
        <div class="close">&times;</div>
                        <p><h4>Major City's</h4>
        </p>
    </div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script>
    $(document).ready(function() {
            $('#supawrap').fadeIn('fast');
            $('.close').click(function() {
                $('.popup').fadeOut('fast');
                $('#supawrap').delay(300).fadeOut('fast');
            });
        });
</script>

Answer 2

#Overlay{
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    opacity:0;
    z-index:2; //lower than your pop up
    background-color:#222;
    background-color:rgba(0,0,0,0.8);
    overflow:hidden;
    display:none;
}

将display:block;设为弹出窗口链接

在弹出窗口中禁用父页面中的链接

2 个答案: