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

154

07 марта 2019, 03:40

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

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

$(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>

Answer 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.

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Алгоритм увеличения изображения при mousewheel

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

190

javascript

Вернуть n массивов

Есть массив данных в котором может находиться не ограниченное кол-во объектовХочу написать функцию которая будет возвращать каждые 10 элементов...

162

javascript

поиск в базе по параметрам

ребят, есть 2 таблицы, в 1ой юзер устанавливает для себя теги, во 2ой вывод новостей (с определенными тегами), если какой то из тегов найдет у юзера...

139

javascript

теги новости на сайте

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

163