Создание только части экрана модальной с помощью jQuery UI - PullRequest
Новая
       2

Создание только части экрана модальной с помощью jQuery UI

7 голосов
/ 10 июня 2011

Есть ли способ создать модальную «область видимости» для диалогов jQuery? В качестве несколько надуманного примера у меня есть страница: 

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Console</title>

        <link href="console.css" rel="stylesheet" type="text/css" />
        <link href="libs/jquery-ui/jquery-ui-1.8.13.custom.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="libs/jquery/jquery-1.6.1.min.js"></script>
        <script type="text/javascript" src="libs/jquery-ui/jquery-ui-1.8.13.custom.min.js"></script>
    </head>

    <body>
        <div id="toolbar"></div>
        <div id="mainContent"></div>
        <div id="footer"></div>
    </body>
</html>

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

Или, если страница содержит несколько div-элементов, похожих на mainContent, у каждого из них есть собственный независимый набор модальных диалогов, которые по-прежнему допускают взаимодействие с другими элементами div.

Я знаю, как создавать модальные диалоги с библиотекой пользовательского интерфейса jQuery; Мой вопрос касается именно применения модальности к разделу страницы, а не ко всей странице, либо с использованием этой библиотеки, либо способом, который легко дополняет эту библиотеку.

1 Ответ

3 голосов
/ 10 июня 2011

Простым решением было бы иметь скрытый div, который будет действовать как наложение.Он всегда будет иметь те же размеры и расположение, что и ваш div "mainContent".Затем покажите этот div поверх вашего контента, используя z-index.Затем поместите ваш модал поверх оверлея.

Чистый эффект, все будет покрыто основной областью контента наложением, но ваш модал будет лежать поверх оверлея, и поэтому пользователь может взаимодействовать только с ним.

Правки:

Управление Z-индексами : Я бы просто установил наложение z-index на большое базовое число, чтобы избежать конфликтов с другими z-индексами.Затем, когда бы вы ни показывали модальное значение, просто используйте селекторы jquery, которые ищут показанные наложения, и увеличивайте модальный z-индекс на одно из этих чисел.javascript для размещения вашего оверлея над нужной областью.Я думаю, что использование абсолютного позиционирования сделает это легко.Тогда, очевидно, вы должны расположить модальный div в центре оверлейного div.

На самом деле вычисления не так уж сложно расположить в центре.Дайте мне знать, если вы хотите, чтобы я взялся за эту работу.

...