how to create a Jquery Popup

Posted by Kirubakaranb.Tech under jQuery on 11/14/2013 | Points: 10 | Views : 5090 | Status : [Member] | Replies : 5
I click an linkbutton or label to show an jquery popup
for Example Name,Address to diaplay as an popup when i click an edit button to change Name,Address with in that jquery popup with out redirecting to another page to make some changes to save that details.
pls give me some idea....
urgent




Responses

Posted by: Rama Sagar on: 11/14/2013 [Member] [MVP] Silver | Points: 25

Up
0
Down

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Popup Dialog - Click</title>
<style type="text/css">
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
z-index: 100;
display: none;
}
.content a{
text-decoration: none;
}
.popup{
width: 100%;
margin: 0 auto;
display: none;
position: fixed;
z-index: 101;
}
.content{
min-width: 600px;
width: 600px;
min-height: 150px;
margin: 100px auto;
background: #f3f3f3;
position: relative;
z-index: 103;
padding: 10px;
border-radius: 5px;
box-shadow: 0 2px 5px #000;
}
.content p{
clear: both;
color: #555555;
text-align: justify;
}
.content p a{
color: #d91900;
font-weight: bold;
}
.content .x{
float: right;
height: 35px;
left: 22px;
position: relative;
top: -25px;
width: 34px;
}
.content .x:hover{
cursor: pointer;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type='text/javascript'>
$(function(){
var overlay = $('<div id="overlay"></div>');
$('.close').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});

$('.x').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});

$('.click').click(function(){
overlay.show();
overlay.appendTo(document.body);
$('.popup').show();
return false;
});
});
</script>
</head>
<body>
<div class='popup'>
<div class='content'>
<img src='http://www.developertips.net/demos/popup-dialog/img/x.png' alt='quit' class='x' id='x' />
<p>
Welcome to DotnetFunda.com. Please use above search option which was there in top right side to get help with many of articles.
<br/>
<br/>
<a href='' class='close'>Close</a>
</p>
</div>
</div>
<div id='container'>
<a href='' class='click'><h2><b>Click Here to See Popup! </b></h2></a> <br/>
</div>
</body>
</html>

ramasagar

Kirubakaranb.Tech, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Vakulkumarmore on: 11/17/2013 [Member] [MVP] Starter | Points: 25

Up
0
Down
checkout the following link :

http://www.jquery4u.com/windows/10-jquery-popup-window-image-slider-plugins/


Kirubakaranb.Tech, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Allemahesh on: 11/18/2013 [Member] [MVP] Silver | Points: 25

Up
0
Down
You can see the blow links:-

http://api.jquerymobile.com/popup/
http://istockphp.com/jquery/creating-popup-div-with-jquery/

Happy Coding,
If it helps you or directs U towards the solution, MARK IT AS ANSWER

Kirubakaranb.Tech, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: t5j9033387989 on: 11/29/2013 [Member] Starter | Points: 25

Up
0
Down
hey it's very simple
kindly visit this one,

http://mcsoft.com.vn/PopUpDiv.html

in it code of this ,and css is also given


mark this answer if it will really help you,

Thanks&Regards
ketan

Kirubakaranb.Tech, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Kmandapalli on: 11/29/2013 [Member] Silver | Points: 25

Up
0
Down
Hi,

There is a control called "Model-PopUp" in ajax which fulfills ur requirement in a very way.
Try using it.

Mark as answer if satisfied....


Regards,
Shree M.

Kavya Shree Mandapalli

Kirubakaranb.Tech, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response