Выравнивание диалога на мобильном телефоне - PullRequest
Новая
       9

Выравнивание диалога на мобильном телефоне

0 голосов
/ 24 ноября 2018

У меня есть диалоговое окно, которое появляется при загрузке страницы.Он скользит сверху, а затем снова скользит вверх, когда закрывается.Он правильно работает на рабочем столе и отображает, как я хочу.Но на мобильном устройстве нижняя часть диалога видна, когда его следует скрыть.И когда он отображается на странице, он отображается далеко вниз, чтобы пользователь не мог видеть весь диалог.

Я не знаю, как полностью настроить это в jsfiddle, чтобы показать диалоговое окно, но я добавил свой основной код здесь .Вы можете видеть, что нижняя часть диалога показывает, но это не должно быть.Если строка в СМИ удалена, нижняя часть не отображается.Если бы я мог понять, как показать диалоговое окно на странице, вы бы увидели, что оно отображается слишком далеко внизу.

Надеюсь, этого достаточно, чтобы кто-то помог.Вот мой код из 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>
...