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

时间:2013-11-06 05:45:04

标签: javascript jquery html jquery-mobile popup

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

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

2 个答案:

答案 0 :(得分:3)

这样的事情:

使用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;
}

答案 1 :(得分:0)

jquery tool tip

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