jquery dialog — несколько диалоговых окон на странице, открываются только по одному за раз

#jquery #user-interface #dialog

#jquery #пользовательский интерфейс #диалоговое окно

Вопрос:

У меня 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"
                });
            }
        });
  

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

Любая помощь была бы замечательной. Спасибо!

Комментарии:

1. Возможно, вы могли бы просто установить глобальное логическое значение, а затем проверить это значение перед открытием нового диалога?

Ответ №1:

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

Комментарии:

1. @nickff, не забудьте выбрать accepted answer , когда сможете