jQuery UI的对话框 - 不会被关闭后打开

Question

我有个问题与 jquery-ui dialog box 。

的问题是，当我关闭对话框，然后我点击触发它的链接，它不会，除非我刷新页面弹出一次。

如何调用对话框后面，而无需刷新页面实际。

下面是我的代码：

$(document).ready(function() {
    $('#showTerms').click(function()
    {
        $('#terms').css('display','inline');
        $('#terms').dialog({
            resizable: false,
            modal: true,
            width: 400,
            height: 450,
            overlay: { backgroundColor: "#000", opacity: 0.5 },
            buttons:{ "Close": function() { $(this).dialog("close"); } },
            close: function(ev, ui) { $(this).remove(); },
    }); 
});

由于

Answer 1

嗨我设法解决这个问题。

我用毁灭来代替关闭功能（它没有任何意义），但它的工作！

$(document).ready(function() {
$('#showTerms').click(function()
{
    $('#terms').css('display','inline');
    $('#terms').dialog({resizable: false,
        modal: true,
        width: 400,
        height: 450,
        overlay: { backgroundColor: "#000", opacity: 0.5 },
        buttons:{ "Close": function() { $(this).dialog('**destroy**'); } },
        close: function(ev, ui) { $(this).close(); },
    });         
});   
$('#form1 input#calendarTEST').datepicker({ dateFormat: 'MM d, yy' });
});

Answer 2

您实际上是应该使用$("#terms").dialog({ autoOpen: false });进行初始化。 然后你可以使用$('#terms').dialog('open');打开对话框，并$('#terms').dialog('close');将其关闭。

Answer 3

在最后一行，不使用$(this).remove()使用$(this).hide()代替。

编辑：为了澄清，在点击关闭事件你除去这就是为什么它不回来了DOM的#terms股利。你只需要隐藏它来代替。

Answer 4

我相信你只能初始化对话框一次。上面的例子试图初始化对话框每次#terms被点击。这会导致问题。相反，应该初始化click事件之外发生。你的例子大概应该是这个样子：

$(document).ready(function() {
    // dialog init
    $('#terms').dialog({
        autoOpen: false,
        resizable: false,
        modal: true,
        width: 400,
        height: 450,
        overlay: { backgroundColor: "#000", opacity: 0.5 },
        buttons: { "Close": function() { $(this).dialog('close'); } },
        close: function(ev, ui) { $(this).close(); }
    });
    // click event
    $('#showTerms').click(function(){
        $('#terms').dialog('open').css('display','inline');      
    });
    // date picker
    $('#form1 input#calendarTEST').datepicker({ dateFormat: 'MM d, yy' });
});

我在想，一旦你清楚了，它应该解决您所描述的“开放链接”的问题。

Answer 5

对于我来说这种方法如下：

在对话框可以通过点击对话框中的X或通过点击“Bewaren”被关闭。我加入的（任意）ID，因为我需要确保添加到DOM HTML的每一个位之后删除。

$('<div id="dossier_edit_form_tmp_id">').html(data.form)
.data('dossier_id',dossier_id)
.dialog({
        title: 'Opdracht wijzigen',
        show: 'clip',
        hide: 'clip',
        minWidth: 520,
        width: 520,
        modal: true,
        buttons: { 'Bewaren': dossier_edit_form_opslaan },
        close: function(event, ui){ 
                                  $(this).dialog('destroy'); 
                                  $('#dossier_edit_form_tmp_id').remove();
               }
});

Answer 6

 <button onClick="abrirOpen()">Open Dialog</button>

<script type="text/javascript">
var $dialogo = $("<div></div>").html("Aqui tu contenido(here your content)").dialog({
       title: "Dialogo de UI",
       autoOpen: false,
       close: function(ev, ui){
               $(this).dialog("destroy");
       }
 function abrirOpen(){
       $dialogo.dialog("open");
 }
});

//**Esto funciona para mi... (this works for me)**
</script>

Answer 7

这是一个超级旧线，但由于答案甚至说，“这是没有任何意义”，我以为我想补充的答案......

在原始讯息使用$（本）卸下摆臂（）;在关闭处理，这实际上从DOM中删除的对话框股利。试图重新初始化一个对话框，因为在div取出是行不通的。

使用$（本）.dialog（“破坏”）被调用方法破坏对话对象定义不从DOM中删除它。

从文档：

  

破坏（）

     

    

完全移除对话功能。这将元素返回到其>>之前的初始化状态。     此方法不接受任何参数。

  

这就是说，只有摧毁或关闭删除，如果你有一个很好的理由。

Answer 8

$(this).dialog('destroy');

作品！

Answer 9

.close（）是MOR一般，可以在参考被用于更多的对象。 .dialog（“关闭”）只能与对话中使用

Answer 10

我使用对话框作为对话文件浏览器和上载然后我重写这样的代码

var dialog1 = $("#dialog").dialog({ 
              autoOpen: false, 
              height: 480, 
              width: 640 
}); 
$('#tikla').click(function() {  
    dialog1.load('./browser.php').dialog('open');
});   

一切似乎工作的伟大。

Answer 11

我曾用jQuery UI的叠加对话框，同样的问题 - 这将只工作一次，然后停止，除非我重新加载页面。我找到了答案在他们的一个例子 - 点击 在同一页面点击多次覆盖 flowplayer_tools_multiple_open_close 结果   - 谁又能虽然，右？ :-) -

的重要的设置似乎是

oneInstance: false

所以，现在我有像这样 -

$(document).ready(function() {

 var overlays = null;

 overlays = jQuery("a[rel]");

 for (var n = 0; n < overlays.length; n++) {

    $(overlays[n]).overlay({
        oneInstance: false, 
        mask: '#669966',
        effect: 'apple',
        onBeforeLoad: function() {
            overlay_before_load(this);
        }
    });

  }

}

和一切工作就好了。

希望这可以帮助别人

0

Answer 12

在jQuery文档有一个链接到本文 “基本的jQuery用户界面的使用对话框” 解释这种情况，如何解决它。