SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    May 2011
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    HTML5 style tag problem?

    I'm trying to create a modal dialog for my site and the css style inside the <style> tags dosen't work but if i link it in from an external css file it applys the style fine. Wondering if theres anything i've got dont wrong here. The code is below along with a link to view. Thanks.

    My Modal Dialog

    Code HTML4Strict:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>My Modal Dialog</title>
    <style type="text/javascript">
    body {
         height:100%;
         margin:0;
         padding:0;
    }
    #overlay {
         visibility: hidden;
         position: absolute;
         left: 0px;
         top: 0px;
         width:100%;
         height:100%;
         text-align:center;
         z-index: 1000;
         background-image:url(background-trans.png);
    }
    #overlay div {
         width:300px;
         margin: 100px auto;
         background-color: #fff;
         border:1px solid #000;
         padding:15px;
         text-align:center;
    }
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
    <script type="text/javascript">
    function overlay() {
    	el = document.getElementById("overlay");
    	el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
    }
    </script>
    </head>
    <body>
    <div id="overlay">
         <div>
              <p>Content you want the user to see goes here.</p>
         </div>
    </div>
    <a href='#' onclick='overlay()'>Click here to show the overlay</a>
    </body>
    </html>

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by nlh205 View Post
    I'm trying to create a modal dialog for my site and the css style inside the <style> tags dosen't work but if i link it in from an external css file it applys the style fine. Wondering if theres anything i've got dont wrong here. The code is below along with a link to view. Thanks.

    My Modal Dialog

    Code HTML4Strict:
    <style type="text/javascript">
    Try <style type="text/css"> instead.

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2011
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for picking that up that was actually pretty stupid of me. Thanks.

  4. #4
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    ... and why are you TRYING to inline it? Just looking to waste bandwidth or something? Oh wait, you've got jq stuff in there too so... ok, yeah.


Bookmarks

Posting Permissions

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