如何将单个 jquery ui 对话框用于多种用途答案

【问题标题】：How to use single jquery ui dialog box for multiple purposes如何将单个 jquery ui 对话框用于多种用途
【发布时间】：2013-02-10 09:04:32
【问题描述】：

我想将同一个 jquery ui 对话框用于多种用途。

在这种情况下，我在每一行都有一个带有复选框的数据网格。用户可以通过按下按钮（删除）来删除他检查的行。每当按下按钮时，都会显示一个 jquery ui 对话框（确认框），其中包含您要删除的消息吗？是或否

但是当没有选中复选框并且用户按下删除按钮时，我想在内容中显示具有不同标题和 msg（未选择行）的 jquery ui 对话框。我该怎么做？

目前我的代码如下所示：

 $(document).ready(function() {
            $( "#dialog" ).dialog({
                autoOpen: false,
                width:"400px",
                modal: true,
                resizable: true,
                buttons: [
                    {
                        text: "Yes",
                        click: function() {
                            $('#form_list_action').submit();
                        }
                    },
                    {
                        text: "Cancel",
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            });
            $( "#action-delete" ).on('click', function(event) {
                event.preventDefault();
                $( "#dialog" ).dialog( "open" );

            });



<div id="dialog" title="Delete Selected Items">
 <p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;">   </span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>

 <a href="" class="action-delete" id="action-delete">Delete</a>

【问题讨论】：

当然，这只是在您的应用程序需要的任何条件下动态管理#dialog 的内容的问题。您可以使用.show() 和.hide() 和/或使用.append() 和类似方法将元素随机输入/输出。如果您需要，jQuery 甚至可以让您轻松地动态创建内容。

标签： jquery jquery-ui jquery-ui-dialog

【解决方案1】：

我正在使用此功能在需要时动态创建一个对话框。

function showPopup(title,url,height,width,data,showCloseBtn)
{
    showCloseBtn = showCloseBtn || false;
    height = height || 'auto';
    width = width || 'auto';

    //Create popup container if needed or remove content
    if($('#popup').length == 0)
        $('body').append('<div id="popup"></div>');
    else
        $('#popup').empty();

    //Reset dialog widget if needed
    try{$('#popup').dialog('destroy');}catch(e){}

    if(showCloseBtn)
        btnCode = {"Fermer": function(){$( this ).dialog( "close" );}}
    else
        btnCode = null;

    //Load content if the data provided is html code
    if(url.search('<') >= 0)
    {
        $('#popup').html(url);
        $('#popup').dialog({
                resizable: false,
                modal: true,
                width: width,
                height : height,
                buttons:btnCode,
                title : title
            });        
    }
    else
    {
        var data = data || {};
        //Load data from url
        $('#popup').load(url,data,function(){
            $(this).dialog({
                resizable: false,
                modal: true,
                width: width,
                height : height,
                buttons:btnCode,
                title : title
            });        
        });                           
    }    
}

【讨论】：