JQuery - Nest Dialogs 3 уровня - PullRequest
Новая
       7

JQuery - Nest Dialogs 3 уровня

0 голосов
/ 01 ноября 2011

Я пытаюсь вложить 3 диалоговых окна.Я пытаюсь предоставить пользователю кнопку, на которую он может нажать.Как только он щелкнет, он увидит всплывающее окно подтверждения, чтобы продолжить действие.Он может либо нажать «Отмена», чтобы возобновить нормальный просмотр веб-сайта, либо нажать «Да, подтвердить», чтобы открыть другое диалоговое окно, в котором будут показаны некоторые детали и две кнопки, а именно «Печать» и «Отмена».Если пользователь нажимает кнопку «Печать», он должен запустить предварительный просмотр и распечатать некоторую информацию из базы данных.Если он нажимает «Отмена», другое всплывающее окно должно спросить его, действительно ли он хочет отменить печать.Если он нажимает кнопку «Да, отменить печать», он должен закрыть 3-е и 2-е всплывающие окна, возвращая его в первое всплывающее окно.Как я могу достичь этой функциональности.

Я ссылался на следующий пост на SO, поскольку он имеет бесконечные всплывающие окна, но я хочу ограничить всплывающие окна до 2-3 уровней:

Модальные диалоговые окна Jquery UI

Как мне добиться требуемой функциональности с точки зрения кодирования (поскольку я новичок в кодировании JS)?

Любая помощь приветствуется.Спасибо.

1 Ответ

2 голосов
/ 01 ноября 2011

Это простой пример, показывающий, как вызвать новый диалог из другого диалога. Вам придется адаптировать его к вашим потребностям. Вы можете попробовать рабочий код здесь: http://jsbin.com/oyosiv

<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
</head>
<body>
<button id="b1">Open Dialogbox</button>

<div id="d1" title="Dialog Box One" style="display: none">
    One!
</div>
<div id="d2" title="Dialog Box Two" style="display: none">
    Two!
</div>
<div id="d3" title="Dialog Box Three" style="display: none">
    Three!
</div>
</body>

<script>
$("#d1").dialog({
    autoOpen: false,
    modal: true,
    buttons: { 
      "Open Two": function() { $("#d2").dialog("open"); },
      "Cancel": function() { $(this).dialog("close"); } 
    }
});

$("#d2").dialog({
    autoOpen: false,
    modal: true,
    buttons: { 
      "Open Three": function() { $("#d3").dialog("open"); },
      "Cancel": function() { $(this).dialog("close"); } 
    }
});

$("#d3").dialog({
    autoOpen: false,
    modal: true,
    buttons: { 
      "Okay": function() { $(this).dialog("close"); } 
    }
});

$("#b1").click(function(){
    $("#d1").dialog("open");
});

</script>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...