Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.10.2018, 14:33
Интересующийся
Отправить личное сообщение для vladislav_zp Посмотреть профиль Найти все сообщения от vladislav_zp
 
Регистрация: 15.04.2016
Сообщений: 10

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

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


$(document).ready(function(){
    PopUpHide();
});
function PopUpShow(){
    $("#popup1").show();
}
function PopUpHide(){
    $("#popup1").hide();
}
Ответить с цитированием
  #2 (permalink)  
Старый 24.10.2018, 15:15
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Так оно вроде и работает, как вам надо
<style>
.b-popup { 
    position:fixed;
    top:20px;
    left:20px;
    border:1px solid black;
    background-color:white;
                 opasity:0; }
.back { background-color:grey;
             }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
$(document).ready(function(){
    PopUpHide();
});
function PopUpShow(){
    $("#popup1").show();
    $(".b-container").toggle("back");
}
function PopUpHide(){
    $("#popup1").hide();
  //  $(".b-container").toggle("back");
}
</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>

Последний раз редактировалось Dilettante_Pro, 24.10.2018 в 17:56.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
PopUp. Модальное окно. Форма NastyaNewer Events/DOM/Window 23 15.04.2018 16:57
Вывод информации в модальное окно frack Общие вопросы Javascript 2 04.08.2016 11:46
Модальное окно. Salvat Элементы интерфейса 4 25.02.2016 09:33
Bootstrap модальное окно igor.3dviz Общие вопросы Javascript 1 09.02.2014 13:27
Как передать переменную в модальное окно sinsir jQuery 24 20.06.2013 16:59