0

Нашел в интернете как сделать модальное окно. Код рабочий, но только есть один нюанс, модальное окно срабатывает когда пользователь заходит на сайт.

А как сделать чтобы оно срабатывало только по нажатию мыши?

$(document).ready(function(){
    PopUpHide();
});
function PopUpShow(){
    $("#popup1").show();
}
function PopUpHide(){
    $("#popup1").hide();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="b-container">
    Sample Text
    <a href="javascript:PopUpShow()">Show popup</a>
</div>
<div class="b-popup" id="popup1">
    <div class="b-popup-content">
        Text in Popup
    <a href="javascript:PopUpHide()">Hide popup</a>
    </div>
</div>

1 ответ 1

1

Можно вот так:

function PopUpShow(){
    $("#popup1").show();
    return false;
}
function PopUpHide(){
    $("#popup1").hide();
    return false;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="b-container">
    Sample Text
    <a href="#" onclick="return PopUpShow();">Show popup</a>
</div>
<div class="b-popup" id="popup1" style="display:none;">
    <div class="b-popup-content">
        Text in Popup
    <a href="#" onclick="return PopUpHide();">Hide popup</a>
    </div>
</div>

Если вы используете бутстрап, то можно вместо инлайн стиля display: none использовать класс d-none.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.