jQuery Mobile data-position-to
RUN
<!DOCTYPE HTML> <html> <head> <title>Position To</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> </head> <body> <div data-role="page"> <div data-role="header" id="position-header"> <h2>Position To</h2> </div> <div role="main" class="ui-content"> <a href="#positionWindow" class="ui-btn ui-btn-inline" data-rel="popup" data-position-to="window">Position to window</a> <br/> <a href="#positionOrigin" class="ui-btn ui-btn-inline" data-rel="popup" data-position-to="origin">Position to origin</a> <br/> <a href="#positionSelector" class="ui-btn ui-btn-inline" data-rel="popup" data-position-to="#position-header">Position to #position-header</a> <div data-role="popup" id="positionWindow" class="ui-content" data-theme="a"> <p>I am positioned to the window.</p> </div> <div data-role="popup" id="positionOrigin" class="ui-content" data-theme="a"> <p>I am positioned over the origin.</p> </div> <div data-role="popup" id="positionSelector" class="ui-content" data-theme="a"> <p>I am positioned over the header for this section via a selector. If the header isn't scrolled into view, collision detection will place the popup so it's in view.</p> </div> </div> </div> </body> </html>
PHÓNG TO