Nsryjdtyk

I have a dialog that pops up on a page load. It slides in from the top and then slides back up when it is closed. It works correctly on a desktop and displays as I want. But on a mobile device, the bottom of the dialog can be seen when it should be hidden. And when it shows on the page, it displays to far down the page so the user can't see the whole dialog.

I don't know how to set this up completely in jsfiddle to show the dialog but I have added my main code here. You can see the bottom of the dialog is showing but it shouldn't be. If the line in the media is removed the bottom doesn't show. If I could figure out how to show the dialog on the page, you would see that it displays too far down.

I hope this is enough for someone to help. Here's my code from jsfiddle.

    <style>

    .login-announce-overlay{

      background:transparent url(images/overlay.png) repeat top left;

      position:fixed;

      top:0px;

      bottom:0px;

      left:0px;

      right:0px;

      z-index:100;

    }

    .login-announce-box{

      position:fixed;

      top:-250px;

      left:30%;

      right:30%;

      font-size:11px;

      background-color:#fff;

      color:#444;

      padding:20px;

      border:2px dashed #ff0000;

      -moz-border-radius: 20px;

      -webkit-border-radius:20px;

      -khtml-border-radius:20px;

      -moz-box-shadow: 0 1px 5px #333;

      -webkit-box-shadow: 0 1px 5px #333;

      z-index:101;

    }

    .login-announce-box h1{

      border-bottom: 2px dashed #7F7F7F;

      margin:-60px -20px 0px -20px;

      padding:10px;

      background-color:#00ff00;

      color:#333;

      -moz-border-radius:20px 20px 0px 0px;

      -webkit-border-top-left-radius: 20px;

      -webkit-border-top-right-radius: 20px;

      -khtml-border-top-left-radius: 20px;

      -khtml-border-top-right-radius: 20px;

    }

    a.login-announce-box-close{

      float:right;

      width:26px;

      height:26px;

      background:transparent url(images/cancel.png) repeat top left;

      margin-top:-55px;

      margin-right:-12px;

      cursor:pointer;

    }

    .login-announce-box-heading {font-weight:bold;color:#ff0000; text-align:center;}

    .login-announce-box-text {font-size:11px;color:#000;padding:4px;margin-bottom:4px;background:#fff;border:1px solid #9a9a9a;}

    .login-announce-box-text A {font-weight:bold;color:#000;}

    .login-announce-pop-text {font-size:20px;font-weight:bold;text-align:center}



    .login-announce-counter-page,

    .login-announce-counter-box { 

     color:red;

     font-weight:bold;

     border:1px solid gray;

     background-color:#FFFF00;

     font-size:14px;

     text-align:center;

     -moz-box-shadow: 0 1px 5px #333;

     -webkit-box-shadow: 0 1px 5px #333;

    }

    .login-announce-counter-page {font-size:20px;} 

    @media (max-width: 640px) {

     div.login-announce-box{ margin: 0 auto;width:90%;left:14px;top:-30px} 

    }

    </style>



    <div class="login-announce-overlay" id="login-announce-overlay" style="display:none;"></div>

    <div class="login-announce-box" id="login-announce-box">

        <a class="login-announce-box-close" id="login-announce-box-close"></a>

        <h1>Title</h1>

        <div>Message goes here</div>

        <div style="padding:10px 0; text-align:center">A sub message goes here</div>  

        <div id="id-window"></div>

    </div>