How to create a simple popup with ajax content? for that we need little bit of css,some js and html. Its very simple.First add a div with class popup_box,add the div into outside of the main wrapper class. we need some styling for the popup so use the css with this. You can add/modify your own things into it. Then the main thing the js. Add these functions loadPopupBox ()and unloadPopupBox()(definitions are given below). call them at appropriate occasions, that’s it.done!
complete code and style are given below.
$.ajax
({
type: "POST",
url: "addDayData.php",
data: TblData,
async: false,
success: function (data) {
loadPopupBox(data);
}
});
1
2
3
4
|
<div class="popup_box">
<div class="ajax_content"></div>
<a class="popupBoxClose"></a>
</div>
|
css
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
.popup_box {
display:none;
position:fixed;
_position:absolute;
width:90%;
height:auto;
background:#FFFFFF;
left: 3.5%;
top: 20%;
z-index:100;
margin-left: 15px;
padding:15px;
-moz-box-shadow: 0 0 5px #ff0000;
-webkit-box-shadow: 0 0 5px #ff0000;
box-shadow: 0 0 5px grey;
}
.popupBoxClose {
width:16px;
height:16px;
right:9px;
top:5px;
position:absolute;
cursor:pointer;
background: url(close.png) no-repeat;
|
Javascript
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
function loadPopupBox(data) {
$('.popup_box').fadeIn('fast');
$('.popup_box .ajax_content').html(data);
$('#wrapper').css({'opacity': '0.3'}); //div with id wrapper is page's main wrapper
}
function unloadPopupBox() {
$('.popup_box').fadeOut('fast');
$('#wrapper').css({
'opacity': '1'
});
}
//Here am invoking the popup on click
jQuery(document).on('click', 'selecter_to_which_triggering_the_popup', function()
{
$.ajax({
type: "POST",
dataType: "html",
url: some_url_which_gives_dynamic_data_as_html,
beforeSend: function(data)
{
//show some loading gif or something
},
success: function(data)
{
loadPopupBox(data);
//hide loading animations or something if it used
}
});
$('.popupBoxClose,#wrapper').click(function() {
unloadPopupBox();
});
}
);
|
0 comments:
Post a Comment