Modal Popup

by shriek

HTML

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div id="test">
<div id="dialog" >
  Are you sure about this?
</div>

<a class="confirmLink" href="http://someLinkWhichRequiresConfirmation.com">Click here</a>
<a class="confirmLink" href="http://anotherSensitiveLink">Or, you could click here</a>

CSS

#dialog{background-color:green;}
.no-close .ui-dialog-titlebar-close {display: none }

JavaScript

$(document).ready(function() {
    $("#dialog").dialog({
      autoOpen: false,
      modal: true,
      dialogClass: 'no-close'
    });
  });

  $(".confirmLink").click(function(e) {
    e.preventDefault();
    var targetUrl = $(this).attr("href");

    $("#dialog").dialog({
      buttons : {
        "Confirm" : function() {
          window.location.href = targetUrl;
        },
        "Cancel" : function() {
          $(this).dialog("close");
        }
      }
    });

    $("#dialog").dialog("open");
  });