jQuery-移动弹出窗口根本不会出现
jQuery-mobile popup won't appear at all
我正在尝试在直接从“http://demos.jquerymobile.com/1.4.2/popup/”复制粘贴的弹出窗口中获取签名。我复制并粘贴它以将其放入我列出的导航中，当我单击 link 时，什么也没有发生。 URL 识别到.../#popupLogin，但是没有弹窗。
HTML 细分：
<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>
问题出在 jQuery 版本上。删除 jQuery CDN 并添加：
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
您只需包含正确的脚本。 mobile.css link 中有一个引号，它给出了 404，而您的 jQuery 版本是错误的。那些 link 正在工作：
<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"/>
看看这个：
#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>
<!-- ABOUT US 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 to Cell City a one stop shop for all your cell phone needs. We offer three cell phones and thats all you need,
We got phones for people of all ages and every phone is equipped with the latest and greatest technology. Not only
are our phones the best pieces of hardware you will ever touch, but the prices...OH MAN...our prices are absolutely
unbeatable. Find any phone anywhere for cheaper and we will give you a phone 100% free, THATS RIGHT 100% FREE! Now
for some Lorum Ipsum to fill up some 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 at 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 to Contact us.<br><br>
</p>
<footer id="footer_about"><image id="image_cr" src="images/Copyright_symbol.png" alt=""/> Cell City, Established 2016, Copyrights all 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 A
</div>
<div id="block_b_25" class="ui-block-b">
<form action="form.php" method="post">
</form>
</div>
</div>
</div>
我正在尝试在直接从“http://demos.jquerymobile.com/1.4.2/popup/”复制粘贴的弹出窗口中获取签名。我复制并粘贴它以将其放入我列出的导航中，当我单击 link 时，什么也没有发生。 URL 识别到.../#popupLogin，但是没有弹窗。
HTML 细分：
<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>
问题出在 jQuery 版本上。删除 jQuery CDN 并添加：
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
您只需包含正确的脚本。 mobile.css link 中有一个引号，它给出了 404，而您的 jQuery 版本是错误的。那些 link 正在工作：
<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"/>
看看这个：
#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>
<!-- ABOUT US 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 to Cell City a one stop shop for all your cell phone needs. We offer three cell phones and thats all you need,
We got phones for people of all ages and every phone is equipped with the latest and greatest technology. Not only
are our phones the best pieces of hardware you will ever touch, but the prices...OH MAN...our prices are absolutely
unbeatable. Find any phone anywhere for cheaper and we will give you a phone 100% free, THATS RIGHT 100% FREE! Now
for some Lorum Ipsum to fill up some 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 at 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 to Contact us.<br><br>
</p>
<footer id="footer_about"><image id="image_cr" src="images/Copyright_symbol.png" alt=""/> Cell City, Established 2016, Copyrights all 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 A
</div>
<div id="block_b_25" class="ui-block-b">
<form action="form.php" method="post">
</form>
</div>
</div>
</div>