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

Question

我正在使用 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;

       $( "#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 （它是）作为解决方案。我所做的与我见过的其他示例不一致，但这是我可以让它工作的唯一方法。

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

我试过这个：$(".ui-dialog-titlebar-close").hide() 它确实摆脱了幻影关闭，但它也隐藏了对话框右上角的“X”。这是我需要的。有什么想法吗？

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');
    }