JQuery диалог - несколько диалогов на странице, открываются только по одному

Question

У меня 12 диалогов на одной странице.Я хочу, чтобы они открывались только в том случае, если ни один из остальных 12 диалогов не открыт.Я не хочу, чтобы он закрывал существующий и открывал новый, я просто хочу, чтобы он открывал только один диалог за раз и не давал пользователю возможности открывать два одновременно.

ОбразецHTML:

               <div id="thumb2" class="suiting-thumb">
                    <img src="img/gallery/suit1-thumb.jpg" alt="" title="" />
                </div>
                <div id="galleryDialog2" class="galleryDialog">
                    <a id="prev-arrow" href="#"></a> 
                    <a id="next-arrow" href="#"></a>
                    <div class="text">
                        text and link
                    </div>
                    <div class="dialog-slider">
                       <img src="img/suiting-details/custom-suiting-vent-styles.jpg" alt="" title="" />                       
                       <img src="img/suiting-details/custom-suit-coat-lining.jpg" alt="" title="" />
                   </div>
               </div>                   

JS:

        /* Gallery Dialog Settings */
        $('[id^=galleryDialog]').dialog({ 
                width: 480,
                height:479, /* 479 seems to be the magic number to get the box to fit vertically on the slider */
                show: 'fade',
                hide: 'fade',
                autoOpen: false,
                draggable: false,
                open: function() {
                    $('#four').stop().fadeTo("fast", 0.3);
                    $('.suiting-thumb').stop().fadeTo("fast", 1.0);
                    $("a#prev").attr("id","prev-false");
                    $("a#next").attr("id", "next-false");
                    $('.suiting-thumb').attr('class', 'suiting-thumb-false');
                },
                close: function() {
                    $('#four').stop().fadeTo("normal", 1);
                    $("a#prev-false").attr("id","prev");
                    $("a#next-false").attr("id", "next");
                    $('.suiting-thumb-false').attr('class', 'suiting-thumb');
                }
        });

        $('.suiting-thumb').click(function() {
            //strip off prefix of thumb id to get number for dialog
            var thumbBtnIdPrefix = 'thumb';
            var thumbBtnNum = $(this).attr('id').substring((thumbBtnIdPrefix.length));
            if(!$('.galleryDialog').dialog("isOpen")) {
                $('#galleryDialog' + thumbBtnNum).dialog('open').dialog('widget').position({ 
                    at: 'center center', 
                    of: $('#slider'),
                    offset: "75 0"
                });
            }
        });

Я пытаюсь использовать ifmenmenet if, чтобы проверить, является ли ".galleryDialog", класс, примененный ко всем диалоговым элементам div,не открыт.Если не открыт, откройте диалоговое окно, на которое нажали.Это работает правильно всякий раз, когда вы открываете "galleryDialog1", но когда я закрываю первый и открываю другой, вы можете открыть столько, сколько хотите, все сразу.

Любая помощь будет удивительной.Спасибо!

Answer 1

Почему бы вам не добавить modal: true к вызовам диалога, таким образом, вы можете просматривать только по одному за раз.