How to show popup while click on text

Ask about general coding issues or problems here.

Moderators: macek, egami, gesf

Post Reply
phpkiller
New php-forum User
New php-forum User
Posts: 36
Joined: Thu Jun 28, 2012 2:11 pm

How to show popup while click on text

Post by phpkiller » Mon Mar 18, 2013 3:35 am

Here is the method to open popup window with fading effect. You can also put image on the place of text.

Code:
<style>
#mask {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}
#dialog {
border: 5px solid gray;
width:570px;
height:auto;
padding:10px;
background-color:#ffffff;
z-index: 9999;
}
.window {
position:fixed;
left:0;
top:0;
width:570px;
height:auto;
display:none;
z-index:999999;
padding:20px;
}
</style>

<!-- This window will result in a popup -->
<div id="dialog" class="window" style="display:none;">
Hi User.How are you?

<a href="#" class="close">Close</a>
</div>

<!-- Click on it to show popup -->
<a href="#dialog" name="modal">Show Popup</a>

<!-- //to cover the screen -->
<div id="mask"></div>

<script>
jQuery(document).ready(function() {

//select all the a tag with name equal to modal
jQuery('a[name=modal]').click(function(e) {
//Cancel the link behavior
e.preventDefault();

//Get the A tag
var id = jQuery(this).attr('href');

//Get the screen height and width
var maskHeight = jQuery(document).height();
var maskWidth = jQuery(window).width();

//Set heigth and width to mask to fill up the whole screen
jQuery('#mask').css({'width':maskWidth,'height':maskHeight});

//transition effect
jQuery('#mask').fadeIn(500);
jQuery('#mask').fadeTo("slow",0.6);

//Get the window height and width
var winH = jQuery(window).height();
var winW = jQuery(window).width();

//Set the popup window to center
jQuery(id).css('top', winH/2-jQuery(id).height()/2);
jQuery(id).css('left', winW/2-jQuery(id).width()/2);

//transition effect
jQuery(id).fadeIn(2000);

});

//if close button is clicked
jQuery('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();

jQuery('#mask').hide();
jQuery('.window').hide();
});

//if mask is clicked
jQuery('#mask').click(function () {
jQuery(this).hide();
jQuery('.window').hide();
});

jQuery(window).resize(function () {

var box = jQuery('.window');

//Get the screen height and width
var maskHeight = jQuery(document).height();
var maskWidth = jQuery(window).width();

//Set height and width to mask to fill up the whole screen
jQuery('#mask').css({'width':maskWidth,'height':maskHeight});

//Get the window height and width
var winH = jQuery(window).height();
var winW = jQuery(window).width();

//Set the popup window to center
box.css('top', winH/2 - box.height()/2);
box.css('left', winW/2 - box.width()/2);

});

});

</script>

seandisanti
php-forum Fan User
php-forum Fan User
Posts: 973
Joined: Mon Oct 01, 2012 12:32 pm

Re: How to show popup while click on text

Post by seandisanti » Mon Mar 18, 2013 7:51 am

if there isn't a question or issue with your script, you should probably move it to the 'php scripts' folder, as this one is for requesting help.

Post Reply

Who is online

Users browsing this forum: No registered users and 1 guest