Question

我使用Jquery UI对话框以下列方式打开编辑表单：

    $('.btnEdit').click(function(e){
       var myID = e.target.id;
       var arrMyID = myID.split('_');
       var myRecID = arrMyID[1];
       var myUrl = "editSubmissionModal.cfm?recID=" + myRecID;

       $( "#divEdit" ).dialog({
          width: '1200',
          position: { my: "center", at: "top", of: window },
          autoOpen: false,
          modal: true,
          close: function(e, ui) {
             $('#divEdit').html('');
             $('#divEdit').hide();
             $('#divMain').show();
          }         
       });                                                          

       $('#divEdit').load(myUrl);
       $('#divMain').hide();
       $('#divEdit').dialog('open');
       $('#divEdit').show();
    });

有一些我一直在努力的事情。每次单击带有btnEdit类的元素时，我都会初始化对话框。如果我在此事件处理程序之外初始化它，则该对话框仅在第一次单击时触发。我已经看过很多关于这个问题的帖子，但他们都指出将autoOpen设置为false（它是）作为分辨率。我所做的与我见过的其他例子不一致，但这是我能让它发挥作用的唯一方式。

第二个问题（实际上我需要解决的问题）是第一次触发事件，在对话框完全加载之前，有一个看起来像是在屏幕上显示的关闭按钮。这是在对话框表单呈现之前;看起来像一个关闭按钮。在第一次之后，它不是一个按钮，而是单词Close作为超链接。对话框完成加载后，按钮（或超链接）消失。

我试过这个：$（＆＃34; .ui-dialog-titlebar-close＆＃34;）。hide（）它确实摆脱了幽灵的关闭，但它隐藏了＆＃39; X＆＃39;在对话框的右上角也是如此。我需要这个。有什么想法吗？

Answer 1

感谢此帖：load external URL into modal jquery ui dialog

我的工作方式如下：

    $('.btnEdit').click(function(e){
            var myID = e.target.id;
            var arrMyID = myID.split('_');
            var myRecID = arrMyID[1];
            var myUrl = "editSubmissionModal.cfm?recID=" + myRecID;
            openDialog(myUrl, myRecID);
    });

    function openDialog(myUrl, myRecID) {
            var $dialog = $('#divEdit')
                .html('<iframe id="myIframe" style="border: 0px; background-color:white;" src="' + myUrl + '" width="100%" height="100%"></iframe>')
                .dialog({
                    title: "Request ID: " + myRecID,
                    autoOpen: false,
                    modal: true,
                    width: '1400',
                    height: '1400',
                    position: { my: "center", at: "top", of: window },
                    draggable:true,
                    open: function(){
                        $('#divMain').hide();
                     },
                     close: function(e, ui) {
                        $('#divEdit').html('');
                        $('#divEdit').hide();
                        $('#divMain').show();
                     }                             
                 });
            $dialog.dialog('open');
    }

Jquery UI对话框问题 - 对话框渲染前的幻像关闭按钮或超链接

1 个答案: