Question

这是jQuery代码：

<script>
    $(document).ready(function() {

        $('.class112').click(function() {
           var msg = $(this).attr('id');
           $('#'+msg).dialog({
                autoOpen:false,
                width:100,
                height:200,
                position:[250,50]
           });

           $('#'+msg).load('classSource/'+msg+'.html');
           $('#'+msg).dialog('open');
       });
   });
</script>

和HTML代码：

<p class="class112" id="class1">open it dude! </p>

<p class="class112" id="class2">open2 dude!</p>

我的目的是当用户点击上面提到的一个段落时，会出现一个jQuery用户界面对话框窗口，里面装有相关的HTML文件。它工作正常，但想到的是当我点击段落时，它们会在点击后消失。我在哪里做错了？

Answer 1

您正在将段落转换为对话框：

$('#'+msg).dialog({
    // ...
});

一旦你这样做，jQuery-UI将隐藏你的段落，直到用这个打开对话框：

$('#'+msg').dialog('open');

然后当你关闭对话框时它会再次隐藏。

您可能需要对话框的专用元素。为对话框创建一个HTML元素并将其隐藏起来：

<div id="dialog" style="display: none;"></div>

然后将其用作对话框：

$('#dialog').dialog({
    autoOpen: false,
    width: 100,
    height: 200,
    position: [250,50]
});

$('.class112').click(function() { 
    var msg = $(this).attr('id');
    $('#dialog').load('classSource/' + msg + '.html', function() {
        $('#dialog').dialog('open');
    });
});

请注意，我还将.dialog('open')调用移动到load回调，这样对话框才会打开，直到加载了相应的内容为止;您可能还想添加一些动画“加载”某种GIF。

如果您希望同时打开多个对话框，则必须稍微调整上述内容，添加单独的<div id="X-dialog">，其中X是段落id，这将是一个非常简单的安排方式。

jQueryUI对话窗口故障

1 个答案: