javascript - jQuery mobile popup that does not block UI

Question

Can I creat a jQuery mobile popup that does not block the UI? The scenarios is something like this: I have a list with checkboxes on each item, and if any of the checkboxes gets checked, i want to show an invite button that pops up just above the footer. It may block the row that it is covering but input to the rest of the page should not be blocked.somethinig like the attached image.

I am not sure if using the popup is the right approach but if its not, can someone please point me in the right direction. Thanks so much.

Answer 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;
}

Answer 2

jquery 工具提示

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