Техническая поддержка «WoT.pw» Среднее время ответа службы поддержки 5 дней, кроме выходных

Форум

ФорумПомогите настроить сайтМодальное диалоговое окно

Заместитель командующего
Kurumyan
Отправлено 09.11.2015 - 17:57

Дубль 2.

Добрый день.

Если возможность создать модальное диалоговое окно со статичным тектом, которое будет отображаться поверх формы заявки.

Запуск окна сразу после загрузки страницы, закрытие по нажатию "Ок" или чего-то подобного.

 

Другой вариант - кнопка "Подать заявку" будет переадресовывать на статичную страницу, а с нее уже по нажатию "Ок" будет переход на форму заявки.

Командующий
Sustenance
Отправлено 09.11.2015 - 18:06
Спойлер

HTML

<div class="overlay">
<span class="close-overlay">Нажми чтобы закрыть</span>
</div>

JS

<script>
$(".close-overlay").click(function(){
$("body").css("overflow", "auto").css("padding-right", "inherit");
$(".overlay").css("display", "none");
});
</script>

CSS

<style type="text/css">
body .overlay {
display:none;
}

body.body-recruitment .overlay {
display:block;
}

body.body-recruitment {
overflow:hidden;
padding-right:17px;

}

.overlay {
position:fixed;
top:0; left:0;
width:100%; height:100%;
background-image:url(data:image/gif;base64,R0lGODlhAwADAIAAAP///wAAACH5BAEHAAAALAAAAAADAAMAAAIERIBxUAA7);
background-position:left top;
background-repeat:repeat;
background-color:rgba(0, 0, 0, 0.8);
z-index:99999;
}

.close-overlay {
width:200px;
height:30px;
margin:auto;
position:absolute;
top:0; left:0; bottom:0; right:0;
background:#fff;
cursor:pointer;
}
</style>

Все вместе можно засунуть в "HTML шапки". Для всех страниц оверлей скрывается, для военкомата display blok.

Сообщение отредактировал Ganta: 10.11.2015 14:27
Заместитель командующего
Kurumyan
Отправлено 09.11.2015 - 18:10

Спасибо.

Командующий
Sustenance
Отправлено 10.11.2015 - 14:05

Пожалуйста. Если что не получится - пишите.

Заместитель командующего
iordanoff
Отправлено 17.03.2016 - 03:15
10.11.2015 - 14:05, Ganta написал:

Пожалуйста. Если что не получится - пишите.

Попытался сделать. Окошко всплывает и при нажатии военкомата и при нажатии подаче заявки, нужно только при подаче. Также не пойму как забить свой текст или вставить картинку помимо надписи нажми . Если можно то спойлер с отметкой, где что менять или прописать.

Сообщение отредактировал iordanoff: 17.03.2016 14:13
Заместитель командующего
Kurumyan
Отправлено 10.04.2016 - 23:11

Здравствуйте.

Для появления окна только при подаче заявки вам нужно в CSS изменить body-recruitment на body-add

Спойлер

body.body-add .overlay {
    display:block;
}

body.body-add {
    overflow:hidden;
}

Свой текст забиваете просто в секцию HTML. Можете это сделать, добавляя текст внутри DIV.

Спойлер

<div class="overlay">
    <div class="overlay-requirements">
        <p>
            <span style="font-size:12pt;">
                <strong>Информация о необходимых навыках для вступления в клан:</strong>
            </span>
        </p>
        <h2 class="clan_ellipsis js-longname-container"><span class="clan_name js-longname">
            <span style="color:#0009ff;">Название клана</span>
        </h2>
        <p>
            <span class="clan_name js-longname">
                <strong>Требования:</strong><br />
                <em>✔ ПП - 100%+</em><br />
                <em>✔ Рейтинг эффективности по WN8 - 5000+</em><br />
            </span>
        </p>
        <span class="close-overlay button-confirm">Продолжить</span>
    </div>
</div>

Ну и лучше будет, если секции HTML и JS закинуть в "HTML шапки", а CSS - в "Свой CSS"

Пожалуйста, авторизируйтесь to post a message,