CODEWITHSUNDEEP
javascriptjqueryhtmljquery-mobilepopup
Khizar
Khizar

Reputation: 2308

jQuery mobile popup that does not block UI

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. enter image description here

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.

Upvotes: 2

Views: 810

Answers (2)

Gajotres
Gajotres

Reputation: 57309

Something like this:

Working jsFiddle example: 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;
}

Upvotes: 3

Anobik
Anobik

Reputation: 4899

jquery tool tip

Check the tool tip example from this link . Not necessarily a tool tip is not a popup as every thing is an html element after all and on load of the tool tip the click on the jquery popup button is also happening . u can incorporate the tool tip code and change styling to display it as a popup

Upvotes: 0

Related Questions