Две модалки с одинаковой логикой

269

27 декабря 2017, 19:39

Есть две кнопки, по клику на которые срабатывают попапы. Проблема в том, что по нажатию на них поочереди всплывают сразу два попапа, и ломается логика. Что я делаю не так? Думаю, проблема с bind, может нельзя два раза использовать ? Мне нужно чтобы окна открывались по очереди, и одновременно два нельзя было открыть. Кто сможет помочь, подсказать?

$(document).ready(function () { 
     
    $('.modal-order').hide(300); 
    $('.order-btn').click(function (e) { 
        var $order = $('.modal-order'); 
 
        if ($order.css('display') != 'block') { 
            $order.show(300); 
 
            var yourClick = true; 
            $(document).bind('click.myEvent', function (e) { 
                if (!yourClick && $(e.target).closest('.modal-order').length == 0) { 
                    $order.hide(300); 
                    $(document).unbind('click.myEvent'); 
                } 
                yourClick = false; 
            }); 
        } 
 
        e.preventDefault(); 
    }); 
 
    $('.modal-search').hide(300); 
    $('.search-btn').click(function (e) { 
        var $search = $('.modal-search'); 
 
        if ($search.css('display') != 'block') { 
            $search.show(300); 
 
            var yourClickSearch = true; 
            $(document).bind('click.myEvent', function (e) { 
                if (!yourClickSearch && $(e.target).closest('.modal-search').length == 0) { 
                    $search.hide(300); 
                    $(document).unbind('click.myEvent'); 
                } 
                yourClickSearch = false; 
            }); 
             
        } 
 
        e.preventDefault(); 
    }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
 
<button class="order-btn" type="button">Click</button> 
 
<button class="search-btn" type="button">Click2</button> 
 
<div class="modal-order"> 
    <h3>Hello</h3> 
</div> 
 
<div class="modal-search"> 
    <h3>Hello 2</h3> 
</div>

Answer 1

Логика ломается из-за анимации, в момент вызова второго попапа анимация первого может еще не завершится, а после завершения анимации стили блока изменятся и перебьют то, что задалось при нажатии на вторую кнопку.

Для анимации используйте функцию .animate(), при ее использовании всегда можно узнать происходит ли в момент клика по другой кнопке анимация в первой(псевдоселектор jquery :animated) и прервать ее .stop().

Использование перечисленного сделает код короче и проще. Информация по перечисленным функциям и псевдоселектору есть на сайте: http://api.jquery.com/