Question

我有一个名为submit的按钮，当我点击此按钮时，我收到了一个确认框。如果我点击确认框上的确定按钮，我会看到一个对话框。但是，如果我取消此对话框并尝试再次执行此操作，则无法看到对话框。

HTML看起来像这样

        <input type="submit" id="btnSubmit" class="button" value="<%= OsflAdminResources.Text_Users_Permanently_Delete_Selected_Users %>"
            onclick="return validate();" />

jQuery是： -

    function validate()
         {
               if(confirm("<%= OsflAdminResources.Text_Delete_Warning_Popup_Message %>"))
               {
                  dialog();
                  return false;
               }
               else
               {
               return false;
               }
         }


     function dialog()
     {
             $("#dialogToShow").dialog({
                        title: "Confirm Password",
                        closeText: "Cancel",
                        show:"slide",
                        resizable: false,
                        modal: true,
                          open: function(ev, ui){
                          $('.ui-widget-overlay').stop().animate({"opacity": "0.40"}, 1480);
                          },
                          close: function(ev, ui){
                          $('.ui-widget-overlay').stop().animate({"opacity": "0"}, 1480);
                          }                  
                          });                     
            return false;
     }

任何人都可以帮我解决这个问题吗？

Answer 1

问题是，您尝试第二次重新初始化对话框。这是不可能的。将对话框分配给变量并使用此引用打开对话框。另外请务必设置autoOpen: false。

尝试以下方法：

var $dialog = null;
function dialog()
{
    // create dialog if not done already
    if (!$dialog) {
        $dialog = $("#dialogToShow").dialog({
            title: "Confirm Password",
            closeText: "Cancel",
            show:"slide",
            resizable: false,
            modal: true,
            autoOpen: false, // this is important! prevent auto open
            open: function(ev, ui){
                $('.ui-widget-overlay').stop().animate({"opacity": "0.40"}, 1480);
            },
            close: function(ev, ui){
                $('.ui-widget-overlay').stop().animate({"opacity": "0"}, 1480);
            }                  
        });
    }
    // use the reference to the dialog and call open.
    $dialog.dialog('open');
    return false;
}

Answer 2

添加$（'＃dialogToShow'）。dialog（'open'）;在返回false之前;函数中的语句，如

function dialog()
     {
             $("#dialogToShow").dialog({
                        title: "Confirm Password",
                        closeText: "Cancel",
                        show:"slide",
                        resizable: false,
                        modal: true,
                          open: function(ev, ui){
                          $('.ui-widget-overlay').stop().animate({"opacity": "0.40"}, 1480);
                          },
                          close: function(ev, ui){
                          $('.ui-widget-overlay').stop().animate({"opacity": "0"}, 1480);
                          }                  
                          });  
            $('#dialogToShow').dialog('open');                   
            return false;
     }

Answer 3

上面的答案没有错，如果你有多个元素在同一页面上产生对话框，这里有一个替代方案

$(function (){
    $('a.choice-edit-link').click( function(){
        $dis = $(this);
        if ( typeof $dis.data('dialogEl') == "undefined" ){
            var dialogEl= $dis.siblings('div.choice-options').dialog({'modal':true});
            $dis.data('dialogEl',dialogEl);
        }
        else {
            $dis.data('dialogEl').dialog('open');
        }
    });
});

它使用.data（）jquery函数来设置和检索对话框元素，类似于上面的示例，如果它不存在则创建它，如果它存在则再次打开它。

第二次单击确认框确定按钮时没有显示对话框？

3 个答案: