Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   PopUp (модальное окно) (https://javascript.ru/forum/dom-window/75616-popup-modalnoe-okno.html)

vladislav_zp 24.10.2018 14:33

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();
}

Dilettante_Pro 24.10.2018 15:15

Так оно вроде и работает, как вам надо
<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>


Часовой пояс GMT +3, время: 21:34.