Как сделать этот модальный диалог более отзывчивым?

Question

Беспокойный модальный диалог, без использования медиа-запросов или JS, является целью (была). Может быть сделано, но я с тех пор потерял код для обновления вопроса.

Вы можете увидеть на этом Fiddle:

https://jsfiddle.net/4qkonfLk/

Код:

.modalDialog { 
 
    position: fixed; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    background: rgba(0, 0, 0, 0.8); 
 
    z-index: 99999; 
 
    opacity: 0; 
 
    -webkit-transition: opacity 400ms ease-in; 
 
    -moz-transition: opacity 400ms ease-in; 
 
    transition: opacity 400ms ease-in; 
 
    pointer-events: none; 
 
} 
 
.modalDialog:target { 
 
    opacity: 1; 
 
    pointer-events: auto; 
 
} 
 
.modalDialog > div { 
 
    width: 400px; 
 
    position: relative; 
 
    margin: 10% auto; 
 
    padding: 5px 20px 13px 20px; 
 
    border-radius: 10px; 
 
    background: #fff; 
 
    background: -moz-linear-gradient(#fff, #999); 
 
    background: -webkit-linear-gradient(#fff, #999); 
 
    background: -o-linear-gradient(#fff, #999); 
 
} 
 
.close2 { 
 
    background: #606061; 
 
    color: #FFFFFF; 
 
    line-height: 25px; 
 
    position: absolute; 
 
    right: -12px; 
 
    text-align: center; 
 
    top: -10px; 
 
    width: 24px; 
 
    text-decoration: none; 
 
    font-weight: bold; 
 
    -webkit-border-radius: 12px; 
 
    -moz-border-radius: 12px; 
 
    border-radius: 12px; 
 
    -moz-box-shadow: 1px 1px 3px #000; 
 
    -webkit-box-shadow: 1px 1px 3px #000; 
 
    box-shadow: 1px 1px 3px #000; 
 
} 
 
.close2:hover { 
 
    background: #00d9ff; 
 
}

<a href="#openModal" class="button">Other Information </a> 
 
<div id="openModal" class="modalDialog"> 
 
    <div> \t <a href="#close" title="Close" class="close2">X</a> 
 
    </div> 
 
</div>

Любые предложения о том, как это исправить? Благодаря!

Answer 1

В результате я использовал некоторые пользовательские классы CSS, основанные на экранах (Media Queries), чтобы использовать что-то другое для меньших экранов. В конце концов, я оставил без изменений все это, поэтому этот вопрос в значительной степени не имеет отношения ни к чему в сообществе , так как я не мог удалить его, я редактирую свои ответы, чтобы понять, о чем я говорю.

Answer 2

Вы можете указать мобильный только CSS с помощью media запросов, медиа запросов применяет CSS правила только в определенных условиях, таких как width диапазоне, более увидеть следующую article.

В вашем случае можно ориентировать мобильную ширину (которая, как правило, 360px) как max-width вашей медиа-запрос следующим образом:

.modalDialog { 
 
    position: fixed; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    background: rgba(0, 0, 0, 0.8); 
 
    z-index: 99999; 
 
    opacity: 0; 
 
    -webkit-transition: opacity 400ms ease-in; 
 
    -moz-transition: opacity 400ms ease-in; 
 
    transition: opacity 400ms ease-in; 
 
    pointer-events: none; 
 
} 
 
.modalDialog:target { 
 
    opacity: 1; 
 
    pointer-events: auto; 
 
} 
 
.modalDialog > div { 
 
    width: 400px; 
 
    position: relative; 
 
    margin: 10% auto; 
 
    padding: 5px 20px 13px 20px; 
 
    border-radius: 10px; 
 
    background: #fff; 
 
    background: -moz-linear-gradient(#fff, #999); 
 
    background: -webkit-linear-gradient(#fff, #999); 
 
    background: -o-linear-gradient(#fff, #999); 
 
} 
 
.close2 { 
 
    background: #606061; 
 
    color: #FFFFFF; 
 
    line-height: 25px; 
 
    position: absolute; 
 
    right: -12px; 
 
    text-align: center; 
 
    top: -10px; 
 
    width: 24px; 
 
    text-decoration: none; 
 
    font-weight: bold; 
 
    -webkit-border-radius: 12px; 
 
    -moz-border-radius: 12px; 
 
    border-radius: 12px; 
 
    -moz-box-shadow: 1px 1px 3px #000; 
 
    -webkit-box-shadow: 1px 1px 3px #000; 
 
    box-shadow: 1px 1px 3px #000; 
 
} 
 
.close2:hover { 
 
    background: #00d9ff; 
 
} 
 
@media (max-width: 360px) { 
 
    .modalDialog > div { 
 
    width: 300px; 
 
    } 
 
}

<a href="#openModal" class="button">Other Information </a> 
 
<div id="openModal" class="modalDialog"> 
 
    <div> \t <a href="#close" title="Close" class="close2">X</a> 
 
    </div> 
 
</div>

Answer 3

Вы хотите использовать @media queries для создания альтернативных визуализаций ,

Как:

@media screen and (min-width: 480px) { 
    body { 
     background-color: lightgreen; 
    } 
} 

ответ here списки много хороших общих из них rynave в; Я думаю, что это распространено иметь 2-4 для:

• шт/таблетки, телефон
• телефон, планшет, компьютер
• телефон, планшет, компьютер, высокое разрешение Или
• смотреть приложение, телефон, планшет, компьютер

Не уверен, что его iPhone настолько полезен.