html - jQuery-mobile popup won't appear at all -
i'm trying sign in pop directly copy-pasted "http://demos.jquerymobile.com/1.4.2/popup/". copied , pasted have go in listed navigation , when click on link nothing happens. url recognizes go .../#popuplogin, there no pop up.
html segment:
<div data-role="page" id="page_home"> <div data-role="navbar" id="navbar"> <div data-role="collapsible" data-collapsed-icon="bars" data-expanded-icon="bars" id="navbar_links"> <h3>menu</h3> <a href="#popuplogin" data-rel="popup" data-position-to="window" data-transition="pop">sign in</a> <a href="#page_home" >products</a> <a href="#page_about">about</a> </div> </div> <div data-role="popup" id="popuplogin" data-theme="a" class="ui-corner-all"> <form> <div style="padding:10px 20px;"> <h3>please sign in</h3> <label for="un" class="ui-hidden-accessible">username:</label> <input name="user" id="un" value="" placeholder="username" data-theme="a" type="text"> <label for="pw" class="ui-hidden-accessible">password:</label> <input name="pass" id="pw" value="" placeholder="password" data-theme="a" type="password"> <button type="submit" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-btn-icon-left ui-icon-check">sign in</button> </div> </form> </div> </div>
you have include right scripts. there quote-mark in mobile.css link make's give 404 , jquery version wrong. links working:
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> <link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet"/>
check out:
#header1 { background-color: #336699; border-bottom: 5px solid gray; height: 100px; position: static; } [data-role="header"] h1 { font-family: impact; font-size: 40pt; color: #ffcc66; margin-top: 43px; margin-left: 100px; text-decoration: none; position: relative; height: 25; } #navbar { background-color: #cccccc; } #h_about { text-align: center; } #p_about { margin: 45px; } #footer_about { background-color: lightgray; margin: 20px; } #image_cr { height: 14px; width: 14px; } #grid_product { margin: 35px; } .signin_pop { float: right; }
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet"/> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> <div data-role="page" id="page_home"> <div data-role="header" id="header1"> <div> <h1>cell city</h1> </div> </div> <div data-role="navbar" id="navbar"> <div data-role="collapsible" data-collapsed-icon="bars" data-expanded-icon="bars" id="navbar_links"> <h3>menu</h3> <a href="#popuplogin" data-rel="popup" data-position-to="window" data-transition="pop">sign in</a> <a href="#page_home" >products</a> <a href="#page_about">about</a> </div> </div> <div data-role="popup" id="popuplogin" data-theme="a" class="ui-corner-all"> <form> <div style="padding:10px 20px;"> <h3>please sign in</h3> <label for="un" class="ui-hidden-accessible">username:</label> <input name="user" id="un" value="" placeholder="username" data-theme="a" type="text"> <label for="pw" class="ui-hidden-accessible">password:</label> <input name="pass" id="pw" value="" placeholder="password" data-theme="a" type="password"> <button type="submit" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-btn-icon-left ui-icon-check">sign in</button> </div> </form> </div> <div id="grid_product" class="ui-grid-b ui-responsive"> <div class="ui-block-a grid_block"> <a href="#page_iphone" class="ui-btn ui-corner-all ui-shadow "> <image src="images/iphone.jpg" alt="" height="200"/> </a><br> <a href="#page_iphone">unlocked original iphone 6s 64gb | without fingerprint function 4.7" 1gb ram 16/64gb rom 8mp camera</a> </div> <div class="ui-block-b grid_block"> <a href="#" class="ui-btn ui-corner-all ui-shadow"> <image src="images/motorola.jpg" alt="" height="200"/> </a><br> <a href="#">motorola 00491nacrtl 8gb gsm / hspa / lte black unlocked cell phone 5" 1gb ram</a> </div> <div class="ui-block-c grid_block"> <a href="#" class="ui-btn ui-corner-all ui-shadow"> <image src="images/nokia.jpg" alt="" height="200"/> </a><br> <a href="#">unlocked microsoft nokia lumia 640 rm-1073, 5" hd lcd, 8mp, 720p, black </a> </div> </div> </div> <!-- page --> <div data-role="page" id="page_about"> <div data-role="header" id="header1"> <div> <h1>cell city</h1> </div> </div> <div data-role="navbar" id="navbar"> <div data-role="collapsible" data-collapsed-icon="bars" data-expanded-icon="bars" id="navbar_links"> <h3>menu</h3> <a href="#popuplogin" data-rel="popup" data-position-to="window" data-transition="pop">sign in</a> <a href="#page_home" >products</a> <a href="#page_about">about</a> </div> </div> <div id="para_about"> <h2 id="h_about">about us</h2> <p id="p_about"> welcome cell city 1 stop shop cell phone needs. offer 3 cell phones , thats need, got phones people of ages , every phone equipped latest , greatest technology. not our phones best pieces of hardware ever touch, prices...oh man...our prices absolutely unbeatable. find phone anywhere cheaper , give phone 100% free, thats right 100% free! lorum ipsum fill space.<br><br> lorem ipsum dolor sit amet, consectetur adipiscing elit. aenean gravida, dolor convallis volutpat consectetur, mauris justo tempor augue, non ultrices libero elit sed est. donec sit amet posuere quam. in hac habitasse platea dictumst. nunc id ultricies est. suspendisse vitae egestas mauris. quisque faucibus, sem blandit cursus dapibus, ipsum quam ultricies neque, et pulvinar diam massa eget quam. proin scelerisque augue leo. phasellus orci libero, pretium non diam vel, feugiat rhoncus metus. etiam neque nisl, porta @ placerat vel, tempor sit amet odio. donec varius viverra justo eu condimentum. vivamus sagittis lacus ac sapien bibendum, ac hendrerit tellus mollis.<br><br> free free contact us.<br><br> </p> <footer id="footer_about"><image id="image_cr" src="images/copyright_symbol.png" alt=""/> cell city, established 2016, copyrights rights reserved, etc etc | andrew & jin productions</footer> </div> </div> <!-- iphone page --> <div data-role="page" id="page_iphone"> <div data-role="header" id="header1"> <div> <h1>cell city</h1> </div> </div> <div data-role="navbar" id="navbar"> <div data-role="collapsible" data-collapsed-icon="bars" data-expanded-icon="bars" id="navbar_links"> <h3>menu</h3> <a href="#popuplogin" data-rel="popup" data-position-to="window" data-transition="pop">sign in</a> <a href="#page_home" >products</a> <a href="#page_about">about</a> </div> </div> <h2 id="iphone_header">unlocked original iphone 6s 64gb | without fingerprint function 4.7" 1gb ram 16/64gb rom 8mp camera</h2> <div id="phone_margin" class="ui-grid-a"> <div id="block_a_75" class="ui-block-a"> content </div> <div id="block_b_25" class="ui-block-b"> <form action="form.php" method="post"> </form> </div> </div> </div>
Comments
Post a Comment