modal pop up on load not working

**jonnyfreak** · 12-19-2016, 02:41 PM

i have found some code to launch a pop up on the load of a webpage but it isnt popping up
i got the code from here
http://www.queness.com/post/77/simpl...indow-tutorial

the code i have used is

Code:

<script>

$(document).ready(function () {
  //id is the ID for the DIV you want to display it as modal window
  launchWindow('dialog'); 

	//select all the a tag with name equal to modal
	$('a[name=modal]').click(function(e) {
		//Cancel the link behavior
		e.preventDefault();
		//Get the A tag
		var id = $(this).attr('href');
	
		//Get the screen height and width
		var maskHeight = $(document).height();
		var maskWidth = $(window).width();
	
		//Set height and width to mask to fill up the whole screen
		$('#mask').css({'width':maskWidth,'height':maskHeight});
		
		//transition effect		
		$('#mask').fadeIn(1000);	
		$('#mask').fadeTo("slow",0.8);	
	
		//Get the window height and width
		var winH = $(window).height();
		var winW = $(window).width();
              
		//Set the popup window to center
		$(id).css('top',  winH/2-$(id).height()/2);
		$(id).css('left', winW/2-$(id).width()/2);
	
		//transition effect
		$(id).fadeIn(2000); 
	
	});
	
	//if close button is clicked
	$('.window .close').click(function (e) {
		//Cancel the link behavior
		e.preventDefault();
		$('#mask, .window').hide();
	});		
	
	//if mask is clicked
	$('#mask').click(function () {
		$(this).hide();
		$('.window').hide();
	});			
	
});

</script>

HTML Code:

<!-- #dialog is the id of a DIV defined in the code below -->
<div id="boxes">

	
	<!-- #customize your modal window here -->

	<div id="dialog" class="window">
		<b><img src="../../resources/img/general/Opening-hours-2016.jpg" width="640" height="460"></b> | 
		
		<!-- close button is defined as close class -->
		<a href="#" class="close">Close</a>

	</div>

	
	<!-- Do not remove div#mask, because you'll need it to fill the whole screen -->	
  <div id="mask"></div>
</div>

css

Code:

<style>

/* Z-index of #mask must lower than #boxes .window */
#mask {
  position:absolute;
  z-index:9000;
  background-color:#000;
  display:none;
}
  
#boxes .window {
  position:fixed;
  width:440px;
  height:200px;
  display:none;
  z-index:9999;
  padding:20px;
}


/* Customize your modal window here, you can add background image too */
#boxes #dialog {
  width:640px; 
  height:560px;
}
</style>

**molendijk** · 12-20-2016, 12:45 PM

Try this:

Code:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Simple jQuery Modal Window</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>

$(document).ready(function() {	
	
//Put in the DIV id you want to display
launchWindow('#popup');
	
//if close button is clicked
$('.window .close').click(function () {
$('#mask').hide();
$('.window').hide();
});		
	
//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});			
	
$(window).resize(function () {
	 
var box = $('#boxes .window');
 
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
      
//Set height and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
               
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();

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

function launchWindow(id) {
	
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
	
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
		
//transition effect		
$('#mask').fadeIn(1000);	
$('#mask').fadeTo("slow",0.8);	
	
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
              
//Set the popup window to center
$(id).css('top',  winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
	
//transition effect
$(id).fadeIn(2000); 

}

</script>

<style>

a {color:#333; text-decoration:none}
a:hover {color:#ccc; text-decoration:none}

#mask {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}
  
#boxes .window {
position:fixed; 
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}

#boxes #popup {
width:375px; 
height:203px;
padding:10px;
background-color:#ffffff;
font-family: verdana;
font-size: 14px
}

.close {
float: right; 
padding: 10px; 
padding-top: 0; 
margin-right: -10px; 
margin-top: -10px; 
font-family: verdana; 
font-size: 22px;
}

</style>

</head>
<body>
<h2 style="text-align: center">Simple jQuery Modal Window</h2>

<div id="boxes">

<div id="popup" class="window">
<a href="javascript: void(0)" class="close" >X</a>
<br>This Is A Simple Modal Window
</div>

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

</body>
</html>

**jonnyfreak** · 12-21-2016, 04:11 PM

thanks that worked

Originally Posted by molendijk

Try this:

Code:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Simple jQuery Modal Window</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>

$(document).ready(function() {	
	
//Put in the DIV id you want to display
launchWindow('#popup');
	
//if close button is clicked
$('.window .close').click(function () {
$('#mask').hide();
$('.window').hide();
});		
	
//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});			
	
$(window).resize(function () {
	 
var box = $('#boxes .window');
 
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
      
//Set height and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
               
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();

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

function launchWindow(id) {
	
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
	
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
		
//transition effect		
$('#mask').fadeIn(1000);	
$('#mask').fadeTo("slow",0.8);	
	
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
              
//Set the popup window to center
$(id).css('top',  winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
	
//transition effect
$(id).fadeIn(2000); 

}

</script>

<style>

a {color:#333; text-decoration:none}
a:hover {color:#ccc; text-decoration:none}

#mask {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}
  
#boxes .window {
position:fixed; 
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}

#boxes #popup {
width:375px; 
height:203px;
padding:10px;
background-color:#ffffff;
font-family: verdana;
font-size: 14px
}

.close {
float: right; 
padding: 10px; 
padding-top: 0; 
margin-right: -10px; 
margin-top: -10px; 
font-family: verdana; 
font-size: 22px;
}

</style>

</head>
<body>
<h2 style="text-align: center">Simple jQuery Modal Window</h2>

<div id="boxes">

<div id="popup" class="window">
<a href="javascript: void(0)" class="close" >X</a>
<br>This Is A Simple Modal Window
</div>

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

</body>
</html>

Thread: modal pop up on load not working

Thread Tools

Search Thread

modal pop up on load not working

Similar Threads

Resolved DHTML Modal window v1.1 error before the wondows to load

Modal once per session not working

DHTML Modal window v1.1-How to load record per ID for update form

_blank is not working in modal dialog

_blank is not working in modal dialog

Bookmarks

Bookmarks

Posting Permissions