Question

我使用jqModal弹出窗口，使用了两个不同的弹出窗口，这些弹出窗口是从不同的代码段触发的。两个弹出窗口都被平滑触发，但当我关闭弹出窗口并打开另一个弹出窗口时，叠加窗口会填充两个弹出窗口的内容。我使用jqmHide（）来关闭弹出窗口。有没有办法在关闭时刷新弹出内容？

$('a.jqModal').click(function(event){
        event.stopPropagation();
        $( $(this).attr('href') )
            .jqm({ modal:true, overlay:80, toTop: true })
            .jqmShow();

        return false;
    });

    $(".jqm").click(function () {
        $("#Dv_AddProfile").jqmHide();
        $("#Dv_DuplicateProfile").jqmHide();
    });

HTML：

<div id="Dv_AddProfile" class="jqmWindow">
   <span id="Spn_Close" class="jqm"><button>Close</button></span>
   //...
   //popup content

</div>
<div id="Dv_DuplicateProfile" class="jqmWindow">
   <span id="Spn_Close" class="jqm"><button>Close</button></span>
   //...
   /// popup content
</div>

Answer 1

这段代码看起来有点奇怪。通过;

初始化您的模态

$('div.jqmWindow').jqm({
  modal:true, 
  overlay:80, 
  toTop: true, 
  trigger: False
});

我将触发器设置为false，因为我注意到你手动触发了模态。默认查找具有类“jqModal”的锚元素。

您没有在HTML示例中包含锚元素，但我认为它们看起来像：

<a href="#Dv_AddProfile" class="jqModal">Open AddProfile Modal</a>
<a href="#Dv_DuplicateProfile" class="jqModal">Open DuplicateProfile Modal</a>

然后，你可以类似地触发模态，而不需要event.stopProgogation（）; e.g。

$('a.jqModal').click(function(){
  $( $(this).attr('href') ).jqmShow();
    return false;
});

现在，让我们利用默认的closeClass行为。这样你就不需要$（“。jqm”）。click（）函数来关闭你的模态。

将结束范围元素的jqm类更改为“jqmClose”，例如

<div id="Dv_DuplicateProfile" class="jqmWindow">
  <span id="Spn_Close" class="jqmClose"><button>Close</button></span>
  //...
  /// popup content
</div>

注意：您可能需要将jqmClose类移动到要触发的click事件的button元素;例如

<span id="Spn_Close"><button class="jqmClose">Close</button></span>

最后;如果要在隐藏中清除模态的内容，请通过自定义onHide回调来执行此操作。我经常遇到这个问题（例如，停止视频播放而不必担心插件中的javascript api）。

像

这样的东西

onHide: function(hash){
  // hide modal
  hash.w.hide();

  // clear content
  $('div.cleared-on-close',hash.w).empty();

  // remove overlay
  hash.o.remove();
}

所以这是你修改过的例子;

标记

<a href="#Dv_AddProfile" class="jqModal">Open AddProfile Modal</a>
<a href="#Dv_DuplicateProfile" class="jqModal">Open DuplicateProfile Modal</a>

<div id="Dv_AddProfile" class="jqmWindow">
   <span id="Spn_Close"><button class="jqmClose">Close</button></span>
   <div class="cleared-on-close">...</div>
   ...
</div>
<div id="Dv_DuplicateProfile" class="jqmWindow">
   <span id="Spn_Close"><button class="jqmClose">Close</button></span>
   <div class="cleared-on-close">...</div>
   ...
</div>

的Javascript

$('div.jqmWindow').jqm({
  modal:true, 
  overlay:80, 
  toTop: true, 
  trigger: False,
  onHide: function(hash){
    // hide modal
    hash.w.hide();

    // clear content
    $('div.cleared-on-close',hash.w).empty();

    // remove overlay
    hash.o.remove();
  }
});

$('a.jqModal').click(function(){
  $( $(this).attr('href') ).jqmShow();
  return false;
});

希望这有帮助！

弹出关闭时刷新jqModal弹出内容

1 个答案: