modal window

when i click on exit link, it opens a modal window. it works first time.
but if i click "OK" button or click the "close" link the window closes. and if i click the exit again, it doesnt work. pl correct it.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
        function OpenDialog() {
                $("#dialog").dialog({ modal: true, buttons: { "Ok": function() { window.location.href="http://www.yahoo.com"; }, "Cancel": function() { $(this).dialog("close"); } } });
        };
</script> 
</head>
<body>
<a href="javascript:OpenDialog()">exit</a> 
<div id="dialog" style="border:1px solid blue;display:none;background-color:gray"><p>Are you sure?</p></div>
</body>
</html>

Open in new window

yingwhoAsked:
Who is Participating?
 
anoyesConnect With a Mentor Commented:
Try this instead.  What you're trying to do now is rebuild the dialog each time you click the link without removing it when you close it.  So we're going to create it once on page load, and then just open it when the link is closed.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $("#dialog").dialog({
      autoOpen: false,
      modal: true,
      buttons: {
        "Ok": function() {
          window.location.href="http://www.yahoo.com";
        },
        "Cancel": function() {
          $(this).dialog("close");
        }
      }
    });
  });
  
  function OpenDialog() {
    $('#dialog').dialog('open');
  };
</script> 
</head>
<body>
<a href="javascript:OpenDialog();">exit</a> 
<div id="dialog" style="border:1px solid blue;display:none;background-color:gray"><p>Are you sure?</p></div>
</body>
</html>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.