Создание модального реагирования

Question

Я работаю над внешними упражнениями, которые я настраивал для улучшения себя, и я столкнулся с настоящей огромной головной болью.

Я пытаюсь сделать свой модальный отзыв на мобильные устройства и планшеты. Как часть плагина wordpress, который я создаю как упражнение see link here.

Это является использование временно на food recipe website

Но до сих пор, я думаю, что я близко.

У меня есть jsfiddle link here.

Но моя главная проблема связана с CSS. Я оставил комментарии о некоторых вещах и вариантах, которые я пробовал.

#overlay:backdrop { 
    /* 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-color: rgba(0, 0, 0, 0.5); 
    */ 
} 
#overlay { 
    visibility: hidden; 
    /* 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    */ 
    width: 100%; 
    height: 100%; 
    text-align: center; 
    z-index: 10000; 
    background-color: rgba(0, 0, 0, 0.5); 
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5); 
    position: fixed; 
    left: 30%; 
    top: 30%; 
    /* 
    -webkit-transform: translate(-27%, -10%); 
    transform: translate(-27%, -10%); 
    */ 
    text-align: center; 
} 
#overlay div#gfb_newsletter_signup_form { 
    max-width: 750px; 
    min-width: 250px; 
    max-height: 750px; 
    min-height: 250px; 
    margin: 5px auto; 
    background-color: #fff; 
    border: 1px solid #000; 
    padding: 20px; 
    text-align: center; 
    position: absolute; 
} 
a.boxclose { 
    float: right; 
    position: absolute; 
    top: -10px; 
    right: -10px; 
    cursor: pointer; 
    color: #fff; 
    border: 1px solid #AEAEAE; 
    border-radius: 30px; 
    background: #605F61; 
    font-size: 17px; 
    display: inline-block; 
    line-height: 0px; 
    /* 
    padding: 11px 7px 17px 7px; 
    */ 
    padding: 11px 8px 15px; 
} 
.boxclose:before { 
    content: "x"; 
} 
.gfb_ebook_img { 
    display: block; 
    clear: both; 
    position: relative; 
    /* 
    top: -20px; 
    left: -30px; 
    */ 
} 
#gfb_newsletter_signup_form h1 { 
    font-family: "Open Sans", Arial, Helvetica, sans-serif; 
    display: block; 
    font-size: 30px; 
    font-weight: bold; 
    color: #333; 
    padding: 0px 10px; 
    text-align: center; 
    /*style="margin-bottom:20px; font-size:18px;"*/ 
} 
div#p-footer { 
    padding: 15px; 
    display: block !important; 
    position: relative; 
} 

Answer 1

Вы можете попытаться изменить накладку на абсолютно позиционированный (таким образом вы можете иметь координаты для внутренней DIV). Затем установите верхнюю, левую, правую, нижнюю все равные 0 и margin auto. Это будет центрировать окно на любом экране, если ваши размеры будут процентами. Затем сделайте то же самое для #gfb_newsletter_signup_form, но добавьте к нему некоторую высоту, возможно, процент, который имеет смысл в ваших минимальных и максимальных значениях.

Так что ваш #overlay и #gfb_newsletter_signup_form может выглядеть примерно так:

#overlay { 
    visibility: hidden; 

    position: absolute; 
    left: 0px; 
    top: 0px; 
    right: 0px; 
    bottom: 0px; 
    margin: auto; 

    width: 100%; 
    height: 100%; 
    text-align: center; 
    z-index: 10000; 
    background-color: rgba(0, 0, 0, 0.5); 
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5); 
    text-align: center; 
} 


#overlay div#gfb_newsletter_signup_form { 
    max-width: 750px; 
    min-width: 250px; 
    max-height: 750px; 
    min-height: 250px; 

    height: 30%; 

    margin: 5px auto; 
    background-color: #fff; 
    border: 1px solid #000; 
    padding: 20px; 
    text-align: center; 
    position: absolute; 
} 

Вот обновленный скрипку https://jsfiddle.net/kzy2a6p7/16/

Answer 2

Вы не получите очень далекий отзывчивый дизайн, который использует фиксированные ширины пикселей для модалов.

Например, накладываемого имеет:

#overlay div#gfb_newsletter_signup_form { 
    max-width: 750px; 
    . 
    . 
    . 
} 

На планшете или телефоне, который может иметь меньше 750px ширину экрана, она погаснет окно просмотра.

Вы должны использовать проценты вместо - в вашей скрипке я изменил эту строку в

max-width:40%; 

и вписываться в jsfiddle окна.

Еще лучше, если бы для вас, чтобы изучить Media Queries и сделать правильный адаптивный дизайн

Answer 3

использование @media экран CSS запрос, чтобы определить вашу модель на другой экран width.outside этого используют запрос класса с шириной в% или эм , но весь класс и идентификаторы с шириной в рх следует определить внутри @media запроса

@media screen and (max-width: screenwithinPx) { 
     //define your class and id here having with and height in px 
    .class{} 
      #Ids{} 
     }