Jquery-Modal Dialog Box

Pdesignz
Pdesignz used Ask the Experts™
on
I would like to use a jquery modal dialog box either by jqueryui or jquery tools. I would like this to show on page load, but then if they close the dialog box and navigate away to another page and then come back to this page I don't want the dialog box to show again until they either close the browser and visit the site again or if they refresh the browser on the page with the dialog on it...newbie to jquery and javascript, so any help or code provided would be much appreciated!

Thanks
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Jon NormanInformation Systems Manager
Top Expert 2012

Commented:
I would say that you should set a session cookie to tell the code that it has displayed.
PdesignzPPC Specialist

Author

Commented:
how would I do this, as I do not know how to set cookies...or how to set so that this is only displayed on page load

Thanks
Jon NormanInformation Systems Manager
Top Expert 2012

Commented:
Here you go:

http://jsfiddle.net/ZuA26/2/

This needs to be in the script tag in the head:

$(document).ready(function(){
 if (getCookie("openShown")!="yes"){
    setCookie("openShown","yes");
    $("#dialog").dialog();
 }else{
     $("#dialog").hide();
 }
});
function setCookie(name, value, expires, path, domain, secure) {
  document.cookie = name + "=" + escape(value) +
  ((expires == null) ? "" : "; expires=" + expires.toGMTString()) +
  ((path == null) ? "" : "; path=" + path) +
  ((domain == null) ? "" : "; domain=" + domain) +
  ((secure == null) ? "" : "; secure");
}
function getCookie(name){
  var cname = name + "=";                                          // e.g. 'UserDetails='
  var dc = document.cookie;                                        // get all defined cookies
  
  // Check cookie(s) are loaded from the user's computer  
  if (dc.length > 0) {
      // Search for the cookie - beginning with the specified name
    begin = dc.indexOf(cname);     
         // Check the required cookie name was found  
             if (begin != -1) {
                               // Extract the text between the initial cookie name and the terminating ';' ( or end of string )
                        begin += cname.length;       
                        end = dc.indexOf(";", begin);
                        if (end == -1) end = dc.length;
                        // return the cookie
                    return unescape(dc.substring(begin, end));
                      }
           }
  return null;
}         // end function - getCookie

Open in new window


This needs to be somewhere in the body:

<div id="dialog" title="Basic dialog">
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

Open in new window


you also need to load jQuery, jQueryUI and a theme. ( http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery , http://jqueryui.com/docs/Getting_Started )
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

PdesignzPPC Specialist

Author

Commented:
Hi Jon, sorry have not replied sooner, I have been out of town...
I have tried the script that you said to use and have also loaded jquery and jqueryUI. I can get the modal dialog to load when the page loads, but then if I navigate to another page and come back to the original page the modal dialog displays again. I wanted the dialog to display on page load, but then if you close the dialog and navigate to another page and then navigate back the dialog would not display due to cookie being set. Also wanted to see how to set cookie for x number of days...

Thanks

I am adding the code to the page so you can see if I am doing anything wrong..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="alexanders.css" rel="stylesheet" type="text/css" />
<link type="text/css" href="css/redmond/jquery-ui-1.8.21.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 if (getCookie("openShown")!="yes"){
    setCookie("openShown","yes");
    $("#dialog").dialog();
 }else{
     $("#dialog").hide();
 }
});
function setCookie(name, value, expires, path, domain, secure) {
  document.cookie = name + "=" + escape(value) +
  ((expires == null) ? "" : "; expires=" + expires.toGMTString()) +
  ((path == null) ? "" : "; path=" + path) +
  ((domain == null) ? "" : "; domain=" + domain) +
  ((secure == null) ? "" : "; secure");
}
function getCookie(name){
  var cname = name + "=";                                          // e.g. 'UserDetails='
  var dc = document.cookie;                                        // get all defined cookies
  
  // Check cookie(s) are loaded from the user's computer  
  if (dc.length > 0) {
      // Search for the cookie - beginning with the specified name
    begin = dc.indexOf(cname);     
         // Check the required cookie name was found  
             if (begin != -1) {
                               // Extract the text between the initial cookie name and the terminating ';' ( or end of string )
                        begin += cname.length;       
                        end = dc.indexOf(";", begin);
                        if (end == -1) end = dc.length;
                        // return the cookie
                    return unescape(dc.substring(begin, end));
                      }
           }
  return null;
}         // end function - getCookie
</script>
<script type="text/javascript"> 
        $(document).ready(function () {
            $("#pizza-rotate").cycle({
                fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
            	speed:    1000, 
                timeout:  5000,
                random:  0
			});
        });
</script> 
<script type="text/javascript">
			$(function(){

				// Dialog
				$('#dialog').dialog({
					modal: true,
					width: 600,
					buttons: {
						"Ok": function() {
							$(this).dialog("close");
						},
						"Cancel": function() {
							$(this).dialog("close");
						}
					}
				});

				// Dialog Link
				$('#dialog_link').click(function(){
					$('#dialog').dialog('open');
					return false;
				});

				//hover states on the static widgets
				$('#dialog_link, ul#icons li').hover(
					function() { $(this).addClass('ui-state-hover'); },
					function() { $(this).removeClass('ui-state-hover'); }
				);

			});
		</script>
<script type="text/javascript" src="http://use.typekit.com/wmn0ttp.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

<body>
<div id="container">
<div id="header"> <a href="default.asp"><img id="alexanders-logo" src="images/alexanders-logo.png" width="321" height="125" /></a>
<div id="contact-info">
<ul>
<li><a href="#">Contact Us</a></li><span>|</span>
<li><a href="#">Careers</a></li><span>|</span>
<li><a href="#">Site Map</a></li>
</ul>
<p>
849 Orange Ave.<br />
Coronado, CA. 92118<br />
(619) 435-5747<br />
<a href="http://www.alexanderspizza.com">http://www.alexanderspizza.com</a>
</p>
</div>
<!--#include file="includes/alexanders-navigation.asp" -->

</div>
<div id="pizza-rotate">
<img src="images/pizza-rotate.jpg" width="930" height="330" />
<img src="images/subs-rotate.jpg" width="930" height="330" />
<img src="images/salad-rotate.jpg" width="930" height="330" />
<img src="images/pita-rotate.jpg" width="930" height="330" />
<img src="images/wings-rotate.jpg" width="930" height="330" />
</div>
<div id="content">
<p>Alexander's Pizza is honored that so many of our customers&mdash;locals and visitors&mdash;tell us they haven't had a better tasting pizza anywhere. Alexander’s Pizza has prided itself on a simple credo: &#8220;Offer the best tasting pizza around&#8221;. We spare no expense in achieving that goal with the highest quality meats and cheeses around. From our award-winning pizzas to our unique Scooby Snacks appetizers, Alexander’s has something for everybody. Alexander's Pizza has been voted &#8220;the local favorite&#8221; and Coronado's Best Pizza 2002-2011 by the readers of Coronado Lifestyle Magazine, as well as one of San Diego's Best Pizzerias by Best of.com. Enjoy your visit to Alexander’s Pizza and enjoy the Crown of Coronado when it comes to pizza.</p>
<div id="alexanders-pizza-specials">
  <div id="left-special">
	<h1>Alexander's</h1>
  		<h2>Menu</h2>
        <h3><a href="#">View Menu</a></h3>
    <ul>
		<li><a href="pizza-menu.asp">Pizza</a></li>
		<li><a href="#">Subs</a></li>
		<li><a href="salad-menu.asp">Salads</a></li>
		<li><a href="#">Calzones</a></li>
		<li>And More&hellip;</li>
    </ul>
  
</div>
<div id="middle-special">
	<h1>Alexander's</h1>
  		<h2>Happy Hour Specials</h2>
        <h3>3 - 6PM &amp; 8 PM to close</h3>
        <ul style="margin-top:0px;">
		<li><a href="pizza-menu.asp">All Slices, Select Beers<br />
		  or 5 Wings ($3)
		</a></li>
		<li><a href="#">6 Scoobies or Small<br />
		  Mystic Pizza ($4)
		</a></li>
		<li><a href="salad-menu.asp">Arrogant <br />
		  Bastard <br />
		  Beer ($6)</a></li>
		<li>View All Specials</li>
    </ul>
</div>
<div id="right-special">
	<h1>Alexander's</h1>
  		<h2>E-Club</h2>
        
        <p>Join our E-Club and be the first <br />
        to know about fun events, <br />
        special offers, coupons and new <br />
        items on the menu!</p>
        <h3><a href="special-offers.asp"><strong>Join Now!</strong></a></h3>
</div>
</div>
</div>

<div id="footer">&copy; <% response.write year(now) %> 
Alexander's Pizza. All Rights Reserved.
</div>
<div id="dialog" title="Basic dialog">
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div></div>
</body>
</html>

Open in new window

Information Systems Manager
Top Expert 2012
Commented:
Hi, that's a bit funny, it seems to work in the jsfiddle, can you try:
$(document).ready(function(){
 alert(getCookie("openShown"));
 if (getCookie("openShown")!="yes"){
    setCookie("openShown","yes");
    $("#dialog").dialog();
 }else{
     $("#dialog").hide();
 }
});

Open in new window

This should alert the value of the cookie when you open the page. Please let me know whether the alert fires and what it says.

Making the cookie expire after a number of days is fairly simple:
$(document).ready(function(){
 if (getCookie("openShown")!="yes"){
    var cookieDate = new Date();
    cookieDate.setDate(cookieDate.getDate()+3);
    setCookie("openShown","yes",cookieDate);
    $("#dialog").dialog();
 }else{
     $("#dialog").hide();
 }
});

Open in new window

This codes sets the cookie to expire in 3 days time.
PdesignzPPC Specialist

Author

Commented:
I can see the dialog, but do not see the alert. I tried this in both Chrome and FireFox.  I also had to move the script to the bottom of the document as the dialog would not display and was breaking the jquery cycle script I have on that page. I am also running this my local machine via localhost, I do not think that would be a problem, but figured would mention it. So with the new alert script, I am not seeing any alert but do get the dialog. If I then navigate to a new page and then back to this page the dialog is then displayed again...

Thanks
PdesignzPPC Specialist

Author

Commented:
Question was not solved and am not getting any further response. I am closing out the question and will try again and see if I can this issue solved. Thanks
Jon NormanInformation Systems Manager
Top Expert 2012

Commented:
Hi, Sorry for not replying before.


You will need to get rid of lines 12-19 of your code in your comment #38091438, add autoOpen=false to the options for the dialog by changing lines 62-73 to
				$('#dialog').dialog({
					modal: true,
					autoOpen: false,
                                        width: 600,
					buttons: {
						"Ok": function() {
							$(this).dialog("close");
						},
						"Cancel": function() {
							$(this).dialog("close");
						}
					}
				});

Open in new window

and add the following code to the script around line 74
				if (getCookie("openShown")!="yes"){
					setCookie("openShown","yes");
					$('#dialog').dialog('open');
				}else{
					$("#dialog").hide();
				}

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial