jQuery自定义弹出问题_Jquery_Html_Css

jQuery自定义弹出问题

jquery html css

jQuery自定义弹出问题,jquery,html,css,Jquery,Html,Css,我正在尝试创建一个自定义css和jQuery弹出窗口，但它不能正常工作。请查看下面的代码，并告诉我哪里错了？我想，如果有人点击“点击我”按钮，弹出窗口将打开，如果用户点击弹出窗口外，则弹出窗口将隐藏我已经在代码中包含了jQuery。这是我的密码： <style> .maskarea { width: 100%; height:700px; background: rgba(255, 255, 255, .7); position: fixe

我正在尝试创建一个自定义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>


马斯卡雷亚先生{
宽度：100%；
高度：700px；
背景：rgba（255,255,255,7）；
位置：固定；
左：0；
排名：0；
显示：无；
}
.弹出窗口{
宽度：300px；
高度：300px；
位置：固定；
左：50%；
背景：#ccc；
左边距：-150px；
最高：50%；
利润上限：-150px；
}
$（函数（）{
$（“.hit”）。单击（函数（）{
$（“.maskarea”）.show（）；
})
})

1st:如果用户单击，您需要创建单击事件。maskarea隐藏它

2nd:另一个单击事件。要阻止的弹出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();
     });
})

阅读第1篇：如果用户点击，您需要创建点击事件。maskarea隐藏它

2nd:另一个单击事件。要阻止的弹出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();
     });
})

阅读有关

您几乎就要到了，您所错过的只是关闭处理器。这里有一个例子

使用以下HTML

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

这是JS

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

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

你几乎就要到了，你错过的只是关闭处理程序。这里有一个例子

使用以下HTML

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

这是JS

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

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

您可以使用各种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>


马斯卡雷亚先生{
宽度：100%；
高度：700px；
背景：rgba（255,255,255,7）；
位置：固定；
左：0；
排名：0；
显示：无；
}
.弹出窗口{
宽度：300px；
高度：300px；
位置：固定；
左：50%；
背景：#ccc；
最高：50%；
}
$（函数（）{
$（“.hit”）。单击（函数（）{
var windowHeight=$（window）.height（）；//获取窗口或屏幕的当前高度
var popup=$（“.popup”）；//缓存弹出窗口
var marginTop='-'+parseInt（popup.height（）/2）+'px'；//动态获取弹出div的高度，并将其减半为负边距
var marginLeft='-'+parseInt（popup.width（）/2）+'px'；//动态获取弹出div的宽度，并将其减半为负边距
css（{'margin-left'：marginLeft，'margin-top'：marginTop}）；
$（“.maskarea”）.height（windowHeight）.show（）；//为maskarea指定窗口高度
})
$（文档）.mouseup（函数（e）{
变量框=$（'.popup'）；
如果（！box.is（e.target）&&box.has（e.target）.length==0）{
$（'.maskarea'）.hide（）；
}
})
})

您可以使用各种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>


马斯卡雷亚先生{
宽度：100%；
高度：700px；
背景：rgba（255,255,255,7）；
位置：固定；
左：0；
排名：0；
显示：无；
}
.弹出窗口{
宽度：300px；
高度：300px；
位置：固定；
左：50%；
背景：#ccc；
最高：50%；
}
$（函数（）{
$（“.hit”）。单击（函数（）{
var windowHeight=$（window）.height（）；//获取窗口或屏幕的当前高度
var popup=$（“.popup”）；//缓存弹出窗口
var marginTop='-'+parseInt（popup.height（）/2）+'px'；//动态获取弹出div的高度，并将其减半为负边距
var marginLeft='-'+parseInt（popup.width（）/2）+'px'；//动态获取弹出div的宽度，并将其减半为负边距
css（{'margin-left'：marginLeft，'margin-top'：marginTop}）；
$（“.maskarea”）.height（windowHeight）.show（）；//为maskarea指定窗口高度
})
$（文档）.mouseup（函数（e）{
变量框=$（'.popup'）；
如果（！box.is（e.target）&&box.has（e.target）.length==0）{
$（'.maskarea'）.hide（）；
}
})
})

打开时，通过查看弹出窗口可以正常工作。您只需在maskarea上创建一个单击处理程序，在单击时隐藏弹出窗口。打开时查看弹出窗口效果良好。您只需在maskarea上创建一个单击处理程序，即可在单击时隐藏弹出窗口。谢谢您Mohamed Yousef:）@RajeshGautam不客气。。请保持你的注意力在e.stopPropagation（）中。。它将帮助您在弹出div中单击，而不隐藏maskarea div。。祝你好运：）谢谢穆罕默德·尤瑟夫：）@RajeshGautam不客气。。请保持你的注意力在e.stopPropagation（）中。。它将帮助您在弹出div中单击，而不隐藏maskarea div。。祝你好运：）谢谢Sanchit，你的代码清楚地解释了大部分事情。谢谢：）还要查找e.stopPropagation（）。谢谢Sanchit，您的代码清楚地解释了大部分内容。谢谢：）还可以查找e.stopPropagation（）。