不阻止 UI 的 jQuery 移动弹出窗口

Posted

技术标签:

【中文标题】不阻止 UI 的 jQuery 移动弹出窗口【英文标题】:jQuery mobile popup that does not block UI 【发布时间】:2013-11-17 06:30:52 【问题描述】:

我可以创建一个不阻塞 UI 的 jQuery 移动弹出窗口吗?场景是这样的:我在每个项目上都有一个带有复选框的列表,如果选中了任何复选框,我想显示一个在页脚上方弹出的邀请按钮。它可能会阻止它所覆盖的行,但不应阻止对页面其余部分的输入。类似于附加图像。

我不确定使用弹出窗口是否是正确的方法,但如果不是,请有人指出我正确的方向。非常感谢。

【问题讨论】:

【参考方案1】:

类似这样的:

工作 jsFiddle 示例:http://jsfiddle.net/Gajotres/cbeTD/

HTML:

<div data-role="page" id="index">
    <div data-theme="b" data-role="header">
        <h1>Index page</h1>
    </div>

    <div data-role="content">
        <a href="#popupBasic" data-rel="popup" data-role="button" data-inline="true" data-transition="pop">Basic Popup</a>
        <div data-role="popup" id="popupBasic" data-position-to=".footer-example">
            <a href="#popupBasic" data-rel="popup" data-role="button" data-inline="true" data-transition="pop">Button</a>
        </div>
    </div>

    <div data-theme="b" data-role="footer" data-position="fixed" class="footer-example">
        <h1>Footer</h1>
    </div>            
</div>   

CSS:

#popupBasic 
    box-shadow: 0 0 0;
    border-width: 0;
    border-radius: 0;
    background: transparent;

【讨论】:

【参考方案2】:

jquery tool tip

查看此链接中的工具提示示例。不一定工具提示不是弹出窗口,因为毕竟每件事都是一个 html 元素,并且在加载工具提示时,jquery 弹出按钮上的点击也会发生。您可以合并工具提示代码并更改样式以将其显示为弹出窗口

【讨论】:

以上是关于不阻止 UI 的 jQuery 移动弹出窗口的主要内容,如果未能解决你的问题,请参考以下文章

javascript--自定义弹出登陆窗口(弹出窗)

在 jquery 中刷新 ui-Dialog 弹出窗口

在新窗口中打开页面而不阻止弹出窗口

一旦按下相关按钮,JQuery 移动弹出窗口并不总是出现

wpf 右下角弹出窗

Java Selenium - 处理页面弹出窗