弹出窗口打开时如何传播 jQuery Mobile 事件？

Posted 2023-05-09

【中文标题】弹出窗口打开时如何传播 jQuery Mobile 事件？

【英文标题】：How to propagate jQuery Mobile events when a popup is open?

【发布时间】：2014-04-11 02:14:42

【问题描述】：

当弹出窗口打开时，似乎没有任何事件被传播到内容 div。

我将弹出窗口用作警报消息，我希望在用户在页面上执行其他任务时保持打开状态。

现场示例： http://jsfiddle.net/wvVmT/703/

我希望即使在弹出窗口打开后单击红色区域也会出现警报。

html：

<div data-role="page">
    <div data-role="content" id="content" style="background-color:red">
        content
        <a href="#" data-role="button" data-rel="popup" id="message-button">Message</a>
        <div data-role="popup" id="message-popup" data-history="false" data-dismissible="false">popup</div>
    </div>
</div>

JS：

$(function() 
  $( '#message-button' ).click(function()
    
      $( '#message-popup' ).popup( 'open' );
    
  );
  $( '#content' ).click(function()
    
      alert('content');
    
  )
);

【问题讨论】：

jsfiddle.net/Palestinian/wvVmT/704 移除 弹出式覆盖。

奥马尔是正确的。您还可以使用第三方插件，例如 jGrowl - jsfiddle.net/ezanker/wvVmT/705

完美！非常感谢，奥马尔！

【参考方案1】：

正如 Omar 所说，必须删除与弹出窗口相关的屏幕。

他建议移除所有弹出窗口的屏幕：

$('.ui-popup-screen').remove();

但实际上，在创建弹出窗口的那一刻，会创建一个具有相同 ID 后跟 -screen 的元素。因此，您可以只删除那个以保留所有其他人的屏幕。在我的例子中：

$('#message-popup-screen').remove();

并且只做一次就足够了，所以你不需要像他的例子那样每次打开弹出窗口时都这样做;）