0

我正在做一个简单的项目我想知道当我点击登录按钮时我想要这样的东西 在此处输入图像描述

当我单击除 div 之外的任何位置时，div 应该消失，有人可以告诉我该怎么做吗？对不起我的英语不好我希望我能把我的问题说清楚

<htm>
    <head> </head>
    <body>
          <div> </div>
    </body>

</html>
4

3 回答 3

1

您可以简单地使用CSS.

给你的 div 添加一个类

<div class="someDiv"></div>

CSS

.someDiv{
    width:400px;
    height:400px;
    z-index:1000;
    background:yellow;
    position:fixed;
    top:50%;
    left:50%;
    margin-top:-150px; 
    margin-left:-150px; 
    display:none;
}

Jquery：显示

$(".someDiv").show()

点击登录按钮

$("#login").click(function () {
     $(".someDiv").show();
});

演示： http: //jsfiddle.net/9umYd/和http://jsfiddle.net/9umYd/1/

于 2013-07-18T15:14:13.720 回答
0

以下代码将监听器附加到登录按钮，单击后将显示弹出窗口，第二部分在文档上附加监听器并检查单击是否在弹出 div 上

$('yourloginbutton').on('click', function(){
 $('#popup').show();
});
$(document).on('click', function(event){
 if(event.target.id != "popup"){
 $('#popup').hide();
}
});
于 2013-07-18T15:16:13.060 回答
0

演示：http: //jsfiddle.net/steven10172/u5E8z/

CSS 在页面中完美居中：

.someDiv{
    width: 500px;
    height: 500px;
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 0px;
    left: 0px;
    margin: auto;
    background: yellow;
    display: none;
    z-index: 100000;
}

要显示的 JavaScript：

$(".someDiv").show()

HTML：

<div class="someDiv">
    Above
    <p>Paragraph</p>
    Below
</div>
于 2013-07-18T15:22:09.607 回答