I'm working on a simple project what I want to know that when I click on login button I want some thing like this
and when i click any where except a div the div should be disappear can some one tell me how can I do something like that? sorry for my bad English i hope that i make my problem clear
<htm>
<head> </head>
<body>
<div> </div>
</body>
</html>
You can simply do it using CSS.
Add a class to you 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: to show
$(".someDiv").show()
on click of login button
$("#login").click(function () {
$(".someDiv").show();
});
Demo: http://jsfiddle.net/9umYd/ and http://jsfiddle.net/9umYd/1/
z-index high so that it doesn't get overlapped by other elements.The following code attaches a listener to the login button and once clicked will show the popup, the second part attaches a listener on the document and checks if the click was on the popup div or not
$('yourloginbutton').on('click', function(){
$('#popup').show();
});
$(document).on('click', function(event){
if(event.target.id != "popup"){
$('#popup').hide();
}
});
Demo: http://jsfiddle.net/steven10172/u5E8z/
CSS to center perfectly in the page:
.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 to show:
$(".someDiv").show()
HTML:
<div class="someDiv">
Above
<p>Paragraph</p>
Below
</div>
