Board index   FAQ   Search  
Register  Login
Board index php forum :: php coding PHP coding => General

How to show popup while click on text

Ask about general coding issues or problems here.

Moderators: macek, egami, gesf

How to show popup while click on text

Postby 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>
phpkiller
New php-forum User
New php-forum User
 
Posts: 30
Joined: Thu Jun 28, 2012 2:11 pm

Re: How to show popup while click on text

Postby 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.
seandisanti
php-forum Fan User
php-forum Fan User
 
Posts: 773
Joined: Mon Oct 01, 2012 12:32 pm


Return to PHP coding => General

Who is online

Users browsing this forum: No registered users and 1 guest

Sponsored by Sitebuilder Web hosting and Traduzioni Italiano Rumeno and antispam for cPanel.