Question

我正在尝试创建自定义css和jQuery弹出窗口，但它无法正常工作。请参阅下面的代码，让我知道我错在哪里？我想如果有人点击“点击我”按钮，弹出窗口就会打开，如果用户在弹出窗口外点击，弹出窗口就会隐藏。

我已经在我的代码中包含了jQuery。这是我的代码：

<style>
    .maskarea {
    width: 100%;
    height:700px;
    background: rgba(255, 255, 255, .7);
    position: fixed;
    left: 0;
    top: 0;
    display:none;
}
.popup {
    width: 300px;
    height: 300px;
    position: fixed;
    left: 50%;
    background: #ccc;
    margin-left: -150px;
    top: 50%;
    margin-top: -150px;
}
</style>
<script>
$(function(){
     $(".hit").click(function(){
        $(".maskarea").show();
     })
})
</script>
</head>
<body>
<a href="javascript:void(0)" class="hit">Click Me</a>
    <div class="maskarea">
        <div class="popup">
        </div>
    </div>
</body>

Answer 1

1st：如果用户点击，则需要创建点击事件.maskarea隐藏

第二次： .popup div的另一个点击事件，以防止.maskarea点击

试试这个

$(function(){
     $(".hit").click(function(){
        $(".maskarea").show();
     });
     // if user click on .maskarea  hide it
     $('.maskarea').on('click', function(){
       $(this).hide();
     });
     // use e.stopPropagation(); for .popup div to prevent .maskarea click
     $('.popup').on('click', function(e){
       e.stopPropagation();
     });
})

working Demo

阅读e.stopPropagation()

Answer 2

你几乎就在那里，所有你错过的都是关闭处理程序。这是一个例子pen。

使用以下HTML

<a href="javascript:void(0)" class="hit">Click Me</a>
<div class="maskarea">
  <div class="popup">
  </div>
</div>

使用此CSS

.maskarea {
  width: 100%;
  height: 700px;
  background: rgba(255, 255, 255, .7);
  position: fixed;
  left: 0;
  top: 0;
  display: none;
}

.popup {
  width: 300px;
  height: 300px;
  position: fixed;
  left: 50%;
  background: #ccc;
  margin-left: -150px;
  top: 50%;
  margin-top: -150px;
}

这个JS

$(function() {
  $(".hit").click(function() {
    $(".maskarea").show();
  });
  $(".maskarea").click(function() {
    $(this).hide();
  });
  $('.popup').on('click', function(e){
    e.stopPropagation();
  });
});

你应该能够有一个功能正常的弹出窗口。

Answer 3

您可以使用各种jquery插件进行弹出，如fancybox，lightbox等。但是如果您想使用自定义代码，您可以编写弹出窗口，如：

    <style>
    .maskarea {
        width: 100%;
        height:700px;
        background: rgba(255, 255, 255, .7);
        position: fixed;
        left: 0;
        top: 0;
        display:none;
    }
    .popup {
        width: 300px;
        height: 300px;
        position: fixed;
        left: 50%;
        background: #ccc;
        top: 50%;
    }
    </style>
    <script>
    $(function(){
        $(".hit").click(function(){
            var windowHeight = $(window).height();  //Get current height of window or screen 
            var popup = $(".popup");    //cache the popup
            var marginTop = '-'+parseInt(popup.height()/2)+'px';  //Dynamically  get height of a popup div, and make it half for negative margin
            var marginLeft = '-'+parseInt(popup.width()/2)+'px';  //Dynamically  get width of a popup div, and make it half for negative margin
            popup.css({'margin-left':marginLeft,'margin-top':marginTop});
            $(".maskarea").height(windowHeight).show(); //assign windows height to maskarea
        })

        $(document).mouseup(function(e){
            var box = $('.popup');
            if(!box.is(e.target)&&box.has(e.target).length===0){
                $('.maskarea').hide();
            }
        })
    })
    </script>

<body>
    <a href="javascript:void(0)" class="hit">Click Me</a>
    <div class="maskarea">
        <div class="popup">

        </div>
    </div>
</body>

jQuery自定义弹出问题

3 个答案: