Code in Jquery Novice to Ninja - Simple Modal Dialog not work in crome and safari

Chapter 7: Forms, Controls, and Dialogs
page number: 277
[B]Simple Modal Dialog
[/B]

The Modal Dialog box perfectly works in Mozilla. however doesnot work in crome and safari… I have played around a lot…but cant get it work.
I have modified the dialog box and used thought out my website… please help me get it done…

It doesn’t work… but are you copying the code from the book or using their code archive? Exactly as it goes? are you doing any modification? (then please, post your code) What’s the error?

Be a bit more specific, please :slight_smile:

I have copied entire code from book. Code archive not working…please try the code archive…open it on safari or chrome…you will find it not working

When I click to open the dialog. Just overlay is showing. The actual dialog box is not showing

Sorry for the delay in answering. I’ve been more than busy and I haven’t had the chance to download the book’s code but I promise that I will do it as soon as I get home this evening :slight_smile:

I hope that you will forgive me :slight_smile:

Yep, you’re right. It doesn’t work in Chrome. I can tell you that on the list of corrections it seems that there’s a bug in JQuery 1.4 and they suggest you that you use jQuery 1.4.2 (since the latest version is 1.7.1 that shouldn’t be a problem). I don’t think that this error comes from this particular bug though.

Not sure if I have the time to look into this… do you want me to move this thread to the javascript forum so someone can have a look at it?

Please…

I thought that you already solved it because I took so long to asnwer… moving it is then! :smiley:

@Rabbit6147; needs a bit of help here… the code in the book doesn’t work in all browsers

This is a simple modal box using jQuery (at the time this was creted, version 1.4). Please, Rabbit, correct me if I’m posting the wrong files

HTML

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>StarTrackr!</title>
    
    <link rel="stylesheet" href="../../css/base.css" type="text/css" media="screen" charset="utf-8"/>
  <link rel="stylesheet" href="../../css/ui-lightness/jquery-ui-1.7.2.custom.css" type="text/css" media="screen" charset="utf-8"/>
  <link rel="stylesheet" href="dialog.css" type="text/css" media="screen" charset="utf-8"/>

    <script src="../../lib/jquery-1.4.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="../../lib/jquery-ui-1.7.2.custom.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
    <div id="container">
        <div id="header">
            <h1>StarTrackr!</h1
    ></div>
        <div id="content">
            <h2>
        Welcome!
      </h2>
      <div id="navigation">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Buy Now!</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Gift Ideas</a></li>
        </ul>
      </div>
      <p id="intro">
        Welcome to <strong>StarTrackr!</strong> the planet's premier celebrity tracking and monitoring service. Need to know where in the world the best bands, musicians or producers are within 2.2 square meters? You've come to the right place. We have a very special special on B-grade celebs this week, so hurry in!    
      </p>
      <p id="disclaimer">
        Disclaimer! This service is not intended for the those with criminal intent. Celebrities are kind of like people so their privacy should be respected. You must agree to our End-User License Agreement: <a href="#" id="eulaOpen">Open eula</a>
      </p>
      <div id="overlay">
        <div id="blanket"></div>
      </div>
      <!-- the dialog contents -->
      <div id="eula" class="dialog">
        <h4>End User License Agreement</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque faucibus varius orci, id consequat urna dapibus at. Sed rhoncus, purus in cursus hendrerit, tellus est fermentum lectus, fringilla pretium lacus lectus at orci. Duis ante justo, eleifend interdum accumsan porta, congue lobortis lacus. Morbi pulvinar arcu ac ante pulvinar id dapibus orci tincidunt. Sed iaculis accumsan purus, eget dapibus tortor molestie quis. Suspendisse hendrerit vulputate lacus, id dapibus leo placerat auctor. Nulla pharetra risus eget sapien sodales ultricies. Ut et est risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris sed leo enim. Proin pretium euismod dolor ac tempus. Suspendisse pellentesque est nec nibh pellentesque hendrerit. </p>
        <div class="buttons">
          <a href="#" class="ok">Agree</a>
          <a href="#" class="cancel">Disagree</a>
        </div>
      </div>
      
      <div id="news">
        <h2>Latest News</h2>
        <p>
          Which member of the seminal calypso/lectro band <em>C&amp;C Music Sweatshop</em> was spotted last night at <em>Dirt</em>, the trendy New York restaurant that serves only food caught and retrieved by the chef's own hands?
          <span class="spoiler">Yes! It's the ever-effervescent, <em>Glendatronix</em>!</span>
        </p>
        <p>Who lost their recording contract today? <span class="spoiler">The Zaxntines!</span></p>
      </div>
  
        </div>

        <div id="footer">
            <p>
                &copy; Copyright 2010 CelebriTracker Productions
            </p>
        </div>
    </div>
</body>
</html>


The CSS


#overlay {
    display:none;
    top: 0; right: 0; bottom: 0; left: 0;
    margin-right: auto;
    margin-left: auto;
    position: fixed;
    width: 100%;
    z-index: 100;
}
#blanket {
    background-color: #000000;    
    top: 0;
    bottom: 0;
    left: 0;
    display: block;
    opacity: 0.8;
    position: absolute;
    width: 100%;
}
.dialog {
    display: none;
    margin: 100px auto;
    position: relative;
  width: 500px;
  padding: 40px;
  background: white;
  -moz-border-radius: 10px;
}

And, of course, the Javascript :smiley:

$(document).ready(function(){
  $('#eulaOpen').click(function() {
    openDialog('#eula');
  });
  $('#eula')
  .find('.ok, .cancel')
  .live('click', function() {
      closeDialog(this);
  })
  .end()
  .find('.ok')
  .live( 'click', function(){
      // Clicked Agree!
    console.log('clicked agree!');
  })
  .end()
  .find('.cancel')
  .live('click', function() {
      // Clicked disagree!
    console.log('clicked disagree!');
  });
});

function openDialog(selector) {
    $(selector)
        .clone()
        .show()
        .appendTo('#overlay')
        .parent()
        .fadeIn('fast');
}
  
function closeDialog( selector ) {
$(selector)
    .parents('#overlay')
    .fadeOut('fast', function() {
        $(this)
            .find('.dialog')
            .remove();
    });
}