Не поддерживается модальный параметр JQuery Dialog

Это код HTML:

<div id="dialog" title="lala" style="display:none;">
        <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

Это JavaScript

$bb('#addTopicButton').live('click',function() {

     $bb( "#dialog" ).dialog({ modal:true, closeOnEscape: false, draggable:false, resizable:false }); 

       });

Почему модальный не работает? Когда он открывается, я все еще могу щелкнуть другие ссылки на странице и сделать что-то в фоновом режиме.

Спасибо большое

UPDATE: Кажется, он работает. Только ссылки активны в фоновом режиме и работают. Как я могу отключить все, включая ссылки?

Ответ 1

Вероятно, вам просто нужно включить JQuery UI CSS на вашу страницу.

Google имеет это на своем CDN:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css

Модальная опция в диалоговом окне создает надпись под вашим диалогом, но поверх остальной части содержимого. Для этого наложения CSS JQuery необходимо правильно работать.

Ответ 2

Просто такая же проблема. Мне нужен был CSS, но я не хотел этого. Поэтому я просто скопировал эту часть в свой собственный код CSS:

.ui-widget-overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: #aaaaaa;
    opacity: 0.3;
}

Ответ 3

Добавление только oui-widget-overlay к вашему css приведет к тому, что оверлей будет отображаться на полной вершине, и даже диалог будет непригодным.

Следовательно, также должен быть добавлен класс .ui-front:

.ui-widget-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.ui-front {
    z-index: 100;
}

Ответ 4

У меня была та же проблема, я решил ее почти так же, как я вошел в файл "jquery-ui.theme.css", поискал ".ui-widget-overlay" и изменил блок с:

.ui-widget-overlay {
    background: #A9BCD0;
    opacity: 1;
    filter: Alpha(Opacity=100); /* support: IE8 */
}

.ui-widget-overlay {
    background: #A9BCD0;
    opacity: .3;
    filter: Alpha(Opacity=30); /* support: IE8 */
}