多个对话框在同一页面内 [英] multiple dialog box within same page

问题描述

要求是单击按钮时显示对话框。我使用jQuery UI创建了对话框。请在这里找到代码 http://jsfiddle.net/M4QM6/32/ 。
ISsue是我有创建对话框的单一功能，我如何显示多个对话框在同一页面中显示不同数据的每个对话框
当我点击dialog2按钮时，我需要显示一个对话框包含textArea和提交按钮的框。请建议。
下面是示例代码：

  $（function（）{
 $（＃dialog ）.dialog（{
 autoOpen：false，
 resizable：true，
 width：750，
 height：300，
 modal：true，
按钮：{
Close：function（）{
 $（this）.dialog（close）; 
} 
} 
}）; 
 
}）; 
  

解决方案

你可以走几条路线。由于您对对话内容的需求非常特定（textarea控制 - 第一个对话框弹出第二个对话框 - 等），我会在页面上硬编码所需的div。因此，制作一个#textAreaDialogdiv，并在其中放置所需的控件并将其样式设置为display：none。接下来，修改你的函数来接受参数（应该弹出的div的名字，单击OK时执行的函数）以及要执行的函数如果单击取消），所以你不仅限于对你所有的模态使用#dialog，而且你可以很好地控制每个按钮被点击后会发生什么（并不总是只关闭对话框），然后设置事件处理程序点击所需按钮的事件，并相应地调用对话框。

code>< input type =buttonid =btnPopFirstModalValue =Open First Modal/>

< div id =divFirstModalstyle =display：none ;>
下面是第一个模式
< / div>的内容

< div id =divSecondModalstyle =display：none;> ;
这里是第二个模式的内容
< / div>

Javascript函数：

 函数PopDialog（divToPop，OkFunction，CancelFunction）
 {
 $（＃+ divToPop）.dialog（{
 autoOpen：false，
 resizable：true，
 width：750，
 height：300，
 modal：true，
 buttons：{
Ok：function（）{
 OkFunction（）; 
 $（this）.dialog（close）; 
}，
取消：function（）{
 CancelFunction（）; 
 $（this）.dialog（close）; 
} 
} 
}）; 
 
}）; $ {
} 
 
函数PopSecondModal（）{
 PopDialog（divSecondModal，function（）{put OK代码点击这里}，function（）{put代码取消点击这里}）; 
} 
  

Javascript事件处理程序：

点击（功能（e）{
e.preventDefault（）;
PopDialog（divFirstModal，PopSecondModal，function （）{}）; //取消空函数，但可以根据需要添加自己的代码
return false;
}）;

请记住，您可以根据需要扩展它，添加更多事件处理程序和自定义div以供使用为更多量身定制的模式。另外，正如你所看到的，你可以在调用PopDialog函数时内联编写你的OK和Cancel函数 - 或者你可以传递一个函数名（如果你想重用这个函数，这是最好的）。

Requirement is to show dialog box on click of a button.I have created dialog box using jQuery UI. Please find the code here http://jsfiddle.net/M4QM6/32/. ISsue is i have single function for creating dialog box, how can i show multiple dialog box within same page with each dialog box displaying different data, When i click on dialog2 button, i need to show a dialog box which has textArea and a submit button.Please suggest. Below is the sample code:

$(function() {
    $("#dialog").dialog({
            autoOpen: false,
            resizable: true,
            width:"750",
            height:300,
            modal: true,
            buttons: {
                "Close": function() {
                    $(this).dialog("close");
                }
            }
        });

    });

解决方案

You could go a couple routes. Since your need for dialog content is pretty specific (textarea control - first dialog pops second dialog - etc), I would hard-code the needed divs on the page. So, make a "#textAreaDialog" div and put the needed controls in it ad set its style to display:none.

Next, modify your function to accept parameters (the name of the div that should be popped, the funciton to execute if "OK" is clicked - and the function to execute if "Cancel" is clicked), so you're not limited to using #dialog for all of your modals and you can finely control what happens when each button is clicked (not always just closing the dialog. Then, set event handlers for the click events of the buttons you need, and call your dialog accordingly.

html:

    <input type="button" id="btnPopFirstModal" Value="Open First Modal"/>

    <div id="divFirstModal" style="display:none;">
        Here is the content for the first modal
    </div>

    <div id="divSecondModal" style="display:none;">
        Here is the content for the second modal  
    </div>

Javascript functions:

    function PopDialog(divToPop, OkFunction, CancelFunction)
    {
        $("#" + divToPop).dialog({
                autoOpen: false,
                resizable: true,
                width:"750",
                height:300,
                modal: true,
                buttons: {
                    "Ok": function() {
                        OkFunction();
                        $(this).dialog("close");
                    },
                    "Cancel": function(){
                        CancelFunction();
                        $(this).dialog("close");
                    }
                }
            });

        });
    }

    function PopSecondModal(){
        PopDialog("divSecondModal", function(){ put code for OK Click here}, function(){put code for Cancel Click here});
    }

Javascript event handlers:

    $("#btnPopFirstModal").click(function(e){
        e.preventDefault();
        PopDialog("divFirstModal", PopSecondModal, function(){}); //empty function for cancel, but you can add your own code as needed
        return false;
    });

Remember, you can expand this as much as you want, adding more event handlers and custom divs to use for more tailored modals. Also, as you can see, you can write your OK and Cancel funcitons inline when calling the PopDialog function - or you can pass it a function name (this is preferable if you're going to reuse that function).

这篇关于多个对话框在同一页面内的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！