Question

我让它工作但问题是它只能工作一次。弹出窗口出现后，链接不起作用，弹出窗口不再显示。我必须刷新才能看到这种情况正在发生。我得到了这个http://jsfiddle.net/pjVcR/2/并且它在jsfiddle中工作，但在我的网站中它不起作用。我的网站链接位于：MY SITE

以下是代码：

  <div class="content">
  <h4><a href="#" >AAAA</a></h4><img src="AAAA.jpg" />
    <div class="dialog" title="AAAA" >text AAAA
    </div>
  </div>

  <div class="content">
  <h4><a href="#" >BBBB</a><br></h4><br><img src="BBBB.jpg" />
    <div class="dialog" title="BBBB" >text
    </div>
  </div>

以及html中提供的脚本：

<script>
$("a").click(function(event) {
  $(this).parent().parent().children(".dialog").dialog({
    close: function( event, ui ) {
      $('.dialog').dialog('destroy');
    }
  });
});
</script>

Answer 1

您有许多dialog类的元素，所以当您致电

时

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

您正在销毁尚不存在的对话框，因此例外：

在初始化之前无法调用对话框上的方法;尝试做调用方法'destroy'

在$(this)处理程序（这是特定的close元素）中使用.dialog的本地实例，以便jQuery知道要销毁哪一个。

$("a").click(function(event) {
  $(this).parent().parent().children(".dialog").dialog({
    close: function( event, ui ) {
      $(this).dialog('destroy');
    }
  });
});

http://jsfiddle.net/pjVcR/3/

请注意，如果您更改代码以使用.dialog而不是$(this)，您仍然会在页面中收到相同的错误，这就是为什么您没有在jsFiddle中收到错误的原因，因为你只有一个带有.dialog类的div。

Answer 2

您遇到的问题是，当您致电

时

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

你正在摧毁对象/它不再存在，你需要重新创建它而不是只是调用它。

尝试创建一个可以放在href标签上的类，它将为您提供所需的内容

尝试这样做：

<a href="PageName.php" class="iframe_popup" title="Title You want The Dialog Box to show">Your Text Link here</a>

$(function() {

$('.iframe_popup').click(function(e) {
    e.preventDefault();         
    var $this = $(this);
    var horizontalPadding = 30;
    var verticalPadding = 30;

    var iframe_popup = $('<iframe id="externalSite" class="externalSite" frameborder="0" allowtransparency="true" src="' + this.href + '" />');
    iframe_popup.dialog(
    {
        title: ($this.attr('title')) ? $this.attr('title') : '',
        autoOpen: true,
        width: 600,
        height: 450,
        modal: true,
        autoResize: true,
        overlay: {
            opacity: 0.5,
            background: "black"
        }
    }).width(600 - horizontalPadding).height(450 - verticalPadding);
});

}); // Close Function

Answer 3

$('.dialog').dialog('destroy');尝试销毁所有对话框，而不仅仅是可见对话框。这就是为什么你会收到错误。

尝试$('.dialog:visible').dialog('destroy');来销毁所有可见的对话框。或者你可以为对话框的id加前缀，然后选择并销毁它们。

如何使jQuery对话框使用超链接文本而不是按钮？

3 个答案: