asked on

Jquery-Modal Dialog Box

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

Jon Norman

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

Pdesignz

ASKER

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 Norman

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 )

Pdesignz

ASKER

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

ASKER CERTIFIED SOLUTION

Jon Norman

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Pdesignz

ASKER

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

Pdesignz

ASKER

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 Norman

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