顯示HTML一個div使用jQuery

我工作的一個簡單的項目，我想知道，當我點擊登錄按鈕，我想這樣的 enter image description here 顯示HTML一個div使用jQuery

一些事情是什麼，當我點擊任何地方，除了一div div應該消失有人能告訴我我該怎麼做？對不起我的英語不好，我希望我做我的問題明確

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

</html>

來源

2013-07-18 Bassam Badr

http://dinbror.dk/bpopup/ – Spokey

http://jqueryui.com/dialog/ – j08691

@Spokey感謝名單什麼我真的尋找 –

您可以簡單地執行它使用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-18 15:14:13 Satpal

你還應該確保將'z-index'設置爲高，以避免被其他元素重疊。 – pandavenger

@pandavenger，是的，我錯過了，更新的答案 – Satpal

下面的代碼將一個監聽器來登錄按鈕，點擊後會顯示彈出，第二部分高度上的文檔和檢查的偵聽器，如果點擊的是彈出股利或不

$('yourloginbutton').on('click', function(){ 
$('#popup').show(); 
}); 
$(document).on('click', function(event){ 
if(event.target.id != "popup"){ 
$('#popup').hide(); 
} 
});

來源

2013-07-18 15:16:13

演示：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-18 15:22:09 Steven10172

顯示HTML一個div使用jQuery

回答

相關問題