Как сделать всплывающее окно только при запуске сайта с телефона?

Question

[Quiterio]

Всех приветствую. Как сделать всплывающее окно только для телефона?
Есть код меню(которое должно появляться всплывающе):

хтмл

<div class="showmobile1"><center>123</center></div>
    <div class="showmobile1">321</div>
    <div class="showmobile1">331</div>
    <div class="showmobile1">1113</div>
    <div class="showmobile1">222</div>
    <div class="showmobile1">555</div>

и код цсс(что показ только для телефонов):

spoiler

.showmobile1 { display: none; color: #fff; box-shadow: 0 0 10px #fff; background-color: rgba(23,15,7,.5); border-radius: 10px; 	margin-bottom: 15px; margin-top: 10px; padding: 3px 20px;}
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){ .showmobile1 { display: block; }}

Как это организовать, чтобы было всплывающим?

Comments

[Lord_Dantes]

Медиа-запрос и модалке сразу активный режим в чем проблема?

Answer 1

[Quiterio]

Без всяких скриптов решил проблему, просто потив интернет.
Кому нужно:

хтмл

div id="parent_popup" class="showmobile1">
  <div id="popup" class="showmobile1">
    <p style="cursor: pointer;" onclick="document.getElementById('parent_popup').style.display='none';">Закрыть</p>
    <li>ТЕКСТ</li><br>
    <li>ТЕКСТ</li><br>
    <li>ТЕКСТ</li><br>
    <li>ТЕКСТ</li><br>
    <li>ТЕКСТ</li><br>
    <li>ТЕКСТ</li>
  </div>
</div>

цсс

.showmobile1 {display: none; ваши стили для текста.}
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){ .showmobile1 { display: block; }}

Answer 2

[Владимир Тимошко]

Можно добавить css анимации, или скрипты на JavaScript. В чём проблема то?

Comments

[Quiterio]

Благодарю за участие в вопросе, но уже решил без всяких скриптов (нужно было простенько :) )