blockui через модальный диалог jQueryUI - PullRequest
Новая
       20

blockui через модальный диалог jQueryUI

27 голосов
/ 20 февраля 2012

Я не могу заставить BlockUI работать через модальное диалоговое окно.
Я пытался следить за проблемами с z-index, но безуспешно ...

На моей веб-странице есть глава:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js" ></script>
<script type="text/javascript" src="http://jquery.malsup.com/block/jquery.blockUI.js?v2.38" ></script>
<link media="all" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css" rel="stylesheet" />

и тело: 

<div id="dialog_test" title="Test">
    TEST
</div>

<a href="#" id="go">GO</a>

<script>
    $(function() {
        $( "#dialog_test" ).dialog({
            autoOpen: false,
            modal: true,
            buttons: {
                "Cancel": function() {
                    $( this ).dialog( "close" );
                },
                "Ajax": function() {
                    $.ajax({
                        "url" : "http://jquery.malsup.com/block/wait.php",
                        "success" : function(json) {
                            $( "#dialog_test" ).dialog( "close" );
                        }
                    });
                }
            }
        });

        $( "#go" ).click(function(event) {
            event.preventDefault();
            $( "#dialog_test" ).dialog( "open" );
        });

    });

    $(document)
        .ajaxStart(function() {
            $.blockUI({
                theme: true
            })
        })
        .ajaxStop($.unblockUI);

</script>

Есть идеи?

Ответы [ 2 ]

45 голосов
/ 21 февраля 2012

Вы не указываете, что вы пытались с z-index.

Плагин blockUI имеет возможность изменить z-index сообщения, которое он создает ( документация ):

// z-index for the blocking overlay 
baseZ: 1000,

jQuery UI Dialog в качестве опции для указания z-index .Его значение по умолчанию равно 1000. Таким образом, вы должны установить большее значение для опции BlockUI, скажем, 2000: 

$.blockUI({
    theme: true,
    baseZ: 2000
})

DEMO

2 голосов
/ 26 февраля 2013

Спасибо Дидье за ​​ваш ответ, это помогло мне встать на путь.Вы заметите, что jsfiddle в ответе Дидье работает в первый раз, когда вы открываете диалоговое окно, но любое дальнейшее открытие и ajax приводит к появлению элементов blockUI под диалогом.Диалог должен перекалибровать свой z-индекс, чтобы он был лучшим в списке при каждом открытии.

Я нашел два возможных пути решения этой проблемы:

  1. ' destroy 'диалоговое окно, когда оно закрыто, и воссоздание его, когда оно открыто.

  2. вместо того, чтобы блокировать весь пользовательский интерфейс, просто заблокируйте диалоговое окно.Это можно сделать с помощью метода , например: 

    $( ".selector" ).dialog( "widget" ).block({ 
    theme: false,
    message: '<h1>Wait for me please...</h1>', 
    css: { border: '3px solid #a00' } 
});
...