SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Mar 2010
    0 Post(s)
    0 Thread(s)

    Jquery Modal Box Help Needed

    I have a project that I need to create a modal for. It activates when a link is clicked. For links that link to pages within the folder it doesn't pop up. But, if it goes outside of that folder (either at the same domain or to another domain) it is supposed to come up and alert the user that they are leaving that area.

    So far I have to modal coming up, but the mask doesn't appear. Also, I'm having trouble figuring out what to do for the URL situation.

    This is the plan given to me for the links:
    .medicare a -> click
    get active url
    get clicked url
    prevent default click event

    parse url

    if domains not equal
    show window

    if sections not equal
    show window

    Any help would be loved. I am a noob to Jquery and is the toughest project I've taken on thus far.

    HTML & Javascript:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
    <html xmlns="">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>overlay test</title>
    <link href="../library/main.css" rel="stylesheet" type="text/css" />
    <link href="../library/modaloverlay.css" rel="stylesheet" type="text/css" />
    <script src="../library/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="../library/jquery.overlay.min.js" type="text/javascript"></script>
    <div id="page_wrapper" align="center">
    <div id="main_content" class="medicare">
    	<p>This is a bunch of text with some links and junk. Here is a link to <a href=	"">google</a>. Here is a link to the <a href="../index.html">main page</a>. Here is a link within <a href="medicare.html">medicare</a>.</p>
    <!-- overlay dialog -->
    <div class="modal" id="leavingsite">
    	<h2>You are about to leave the Humana Medicare website.</h2>
    	<p>Do you wish to continue?</p>
            <button type="submit" class="close">Continue</button>
            <button type="button" class="close">Go Back</button>
            <br />
            <input name="optout" type="checkbox" value="Do not display this message again." />
    $(document).ready(function() {
    	$(".medicare a").click(function(e) {
    		var triggers = $(".modal").overlay({
    			mask: {
    				color: '#999',
    				loadSpeed: 200,
    				opacity: 0.9
    			closeOnClick: false,
    			load: true
    		var buttons = $("#leavingsite button").click(function(e) {
    				var yes = buttons.index(this) === 0;
    CSS for modal (if need to look at)

    @charset "UTF-8";
    /* CSS Document */
    .modal {
    	background-color: #fff;
    	display: none;
    	width: 350px;
    	padding: 15px;
    	text-align: left;
    	border: 2px solid #333;
    	opacity: 0.8;
    	-moz-border-radius: 6px;
    	-webkit-border-radius: 6px;
    	-moz-box-shadow: 0 0 50px #ccc;
    	-webkit-box-shadow: 0 0 50px #ccc;
    .modal h2 {
    	margin: 0px;
    	padding: 10px 0 10px 45px;
    	border-bottom: 1px solid #333;
    	fontsize: 20px;
    #leavingsite {
    	position: fixed;
    	z-index: 9999;
    	top: 37.5px;
    	left: 448px;
    	display: block;

  2. #2
    SitePoint Member
    Join Date
    Mar 2010
    0 Post(s)
    0 Thread(s)
    Help no longer needed.

Tags for this Thread


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts