4

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

这是代码：

  <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>
4

3 回答 3

2

你有很多元素与dialog类，所以当你打电话

$('.dialog').dialog('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。

于 2013-10-14T19:27:54.123 回答
0

$('.dialog').dialog('destroy');试图摧毁你所有的对话框，而不仅仅是可见的。这就是为什么你得到一个错误。

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

于 2013-10-14T19:39:56.587 回答
0

你遇到的问题是当你打电话时

$('.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
于 2013-10-14T19:17:53.900 回答