Fenêtre pop-up jQuery Mobile
La fenêtre contextuelle est une boîte de dialogue très populaire, qui peut être affichée sur la page.
Les pop-ups peuvent être utilisées pour afficher un morceau de texte, des images, des cartes ou tout autre contenu.
Pour créer une fenêtre pop-up, vous devez utiliser les éléments <a> Ajoutez data-rel="popup" sur l'élément <a> L'attribut <div> ajoute l'attribut data-role="popup". Ensuite, nous spécifions l'identifiant pour <div>, puis définissons la valeur href de <a> sur l'identifiant spécifié par <div>. Le contenu dans <div> est le contenu affiché dans la fenêtre contextuelle.
Remarque : <div> La fenêtre contextuelle et le lien <a>
Instance
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>欢迎访问我的主页</h1> </div> <div data-role="main" class="ui-content"> <a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">显示弹窗</a> <div data-role="popup" id="myPopup"> <p>这是一个简单的弹窗</p> </div> </div> <div data-role="footer"> <h1>底部文本</h1> </div> </div> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Si vous devez ajouter des marges intérieures et extérieures à la fenêtre contextuelle, vous pouvez ajouter la classe "ui-content" dans <div> :
Instance
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>欢迎访问我的主页</h1> </div> <div data-role="main" class="ui-content"> <a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">显示弹窗</a> <div data-role="popup" id="myPopup" class="ui-content"> <h3>欢迎!</h3> <p>"ui-content" 类在弹窗使用 <span style="font-size:55px;">样式文本</span> 时是特别有用的，它可以使得弹窗看起来更加美观时尚。 <strong>注意：</strong> 如果需要文本会包含多行。</p> </div> </div> <div data-role="footer"> <h1>底部文本</h1> </div> </div> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Fermez la fenêtre contextuelle -Fenêtre pop-up
Par défaut, cliquez en dehors de la fenêtre pop-up ou appuyez sur la touche "Esc" pour fermer la fenêtre pop-up. Si vous ne souhaitez pas cliquer en dehors de la fenêtre contextuelle pour fermer la fenêtre contextuelle, vous pouvez ajouter l'attribut data-dismissible="false" (non recommandé). Vous pouvez également ajouter un bouton de fermeture sur la fenêtre pop-up, en utilisant data-rel="back" sur le bouton Propriétés et contrôlez la position du bouton via les styles.
| 描述 | 实例 |
|---|---|
| 右侧关闭按钮 | 尝试一下 |
| 左侧关闭按钮 | 尝试一下 |
| 使用 data-dismissible 属性 | 尝试一下 |
Positionnement de la fenêtre pop-up
Par défaut, la fenêtre pop-up sera affichée directement au-dessus de l'élément cliqué si vous devez contrôler la position de l'élément cliqué. fenêtre contextuelle, vous pouvez ouvrir la fenêtre contextuelle dans Utiliser l'attribut data-position-to sur le lien de clic de la fenêtre.
Trois façons de contrôler la position de la fenêtre contextuelle :
| 属性值 | 描述 |
|---|---|
| data-position-to="window" | 弹窗在窗口居中显示 |
| data-position-to="#myId" | 弹窗显示在知道的 #id 元素上 |
| data-position-to="origin" | 默认。弹窗显示在点击的元素上。 |
Instance
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>欢迎访问我的主页</h1> </div> <div data-role="main" class="ui-content"> <a href="#myPopup1" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all" data-position-to="window">弹窗窗口显示</a> <a href="#myPopup2" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all" data-position-to="#demo">弹窗显示在 id="demo" 元素上</a> <a href="#myPopup3" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all" data-position-to="origin">默认显示</a> <div data-role="popup" id="myPopup1" class="ui-content"> <p>我显示在窗口的中间部分。</p> </div> <div data-role="popup" id="myPopup2" class="ui-content"> <p>我显示在 id="demo" 的元素上。</p> </div> <div data-role="popup" id="myPopup3" class="ui-content"> <p>我显示在点击的按钮上。</p> </div> <p>这是一个段落。</p> <p>这是另外一个段落。</p> <p>这还是一个段落。</p> <p>这是一个段落。这个段落包含了子元素：这是一个插入在段落中 id="demo" 的 <span id="demo" style="color:red;">span</span> 元素 。</p> </div> <div data-role="footer"> <h1>底部文本</h1> </div> </div> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Transition
Par défaut, la fenêtre pop-up n'a aucun effet de transition. Si vous en avez besoin, vous pouvez ajouter des effets de transition (transitions jQuery Mobile) via l'attribut data-transition="value" :
Toutes les instances d'effet de transition
instances
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>欢迎访问我的主页</h1> </div> <div data-role="main" class="ui-content"> <p>以下演示了弹窗所有过渡效果的实例。</p> <p><b>注意：</b> 从性能方面上考虑， jQuery Mobile 推荐使用 "pop", "fade" 或 "none" 过渡效果。</p> <a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="fade">淡入</a> <a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="flip">翻转</a> <a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="flow">抛出当前页后显示</a> <a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="pop">弹出</a> <a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="slide">向左滑动</a> <a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="slidefade">向左滑动并淡入</a> <a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="slideup">向上滑动 up</a> <a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="slidedown">向下滑动</a> <a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="turn">转向</a> <a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="none" >无过渡效果。</a> <div data-role="popup" id="myPopup" class="ui-content"> <p>这是一个简单的弹窗。</p> </div> </div> <div data-role="footer"> <h1>底部文本</h1> </div> </div> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Petite bordure en direction de la fenêtre pop-up
Si vous devez ajouter une petite bordure en direction de la fenêtre pop-up, vous pouvez utiliser l'attribut data-arrow et spécifier la valeur "l" (à gauche), "t" (en haut), "r" (à droite) ou "b" (en bas) :
Exemple
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>欢迎访问我的主页</h1> </div> <div data-role="main" class="ui-content"> <p>点击按钮打开一个带方向边框的弹窗。</p> <a href="#myPop1" data-rel="popup" class="ui-btn ui-btn-inline" data-position-to="#demo">左边</a> <a href="#myPop2" data-rel="popup" class="ui-btn ui-btn-inline" data-position-to="#demo">顶部</a> <a href="#myPop3" data-rel="popup" class="ui-btn ui-btn-inline" data-position-to="#demo">右边</a> <a href="#myPop4" data-rel="popup" class="ui-btn ui-btn-inline" data-position-to="#demo">底部</a> <div data-role="popup" id="myPop1" class="ui-content" data-arrow="l"> <p>在左边框有个方向。</p> </div> <div data-role="popup" id="myPop2" class="ui-content" data-arrow="t"> <p>在顶部边框有个方向。</p> </div> <div data-role="popup" id="myPop3" class="ui-content" data-arrow="r"> <p>在右边框有个方向。</p> </div> <div data-role="popup" id="myPop4" class="ui-content" data-arrow="b"> <p>在底部边框有个方向。</p> </div> <p>这是一个段落，用于实例展示。弹窗显示在 <span id="demo" style="color:red;">这里</span>。</p> </div> <div data-role="footer"> <h1>底部文本</h1> </div> </div> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
pop -boîte de dialogue
Vous pouvez créer la fenêtre contextuelle comme une boîte de dialogue standard (en-tête, contenu et balise inférieure) :
Exemple
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>欢迎访问我的主页</h1> </div> <div data-role="main" class="ui-content"> <a href="#myPopupDialog" data-rel="popup" data-position-to="window" data-transition="fade" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">打开对话框弹窗</a> <div data-role="popup" id="myPopupDialog"> <div data-role="header"> <h1>头部文本</h1> </div> <div data-role="main" class="ui-content"> <h2>欢迎访问弹窗对话框!</h2> <p>jQuery Mobile 非常有意思!</p> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b ui-icon-back ui-btn-icon-left" data-rel="back">返回</a> </div> <div data-role="footer"> <h1>底部文本</h1> </div> </div> </div> <div data-role="footer"> <h1>底部文本</h1> </div> </div> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
Fenêtre pop-up d'image
Vous peut afficher des images dans la fenêtre contextuelle :Instance
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>欢迎访问我的主页</h1> </div> <div id="pageone" data-role="main" class="ui-content"> <p>点击图片放大它。</p> <p>注意我们在右上角添加了 "返回按钮"。</p> <a href="#myPopup" data-rel="popup" data-position-to="window"> <img src="http://www.php.cn/wp-content/uploads/2015/10/php.jpeg" alt="Skaret View" style="width:200px;"></a> <div data-role="popup" id="myPopup"> <p>这是我的图片！</p> <a href="#pageone" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a><img src="http://www.php.cn/wp-content/uploads/2015/10/php.jpeg" style="width:800px;height:400px;" alt="Skaret View"> </div> </div> <div data-role="footer"> <h1>底部文本</h1> </div> </div> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
Superposition d'arrière-plan de la fenêtre contextuelle
Vous pouvez utiliser l'attribut data-overlay-theme pour ajouter une couleur d'arrière-plan derrière la fenêtre contextuelle.
La couleur de fond de la superposition est transparente par défaut. Utilisez data-overlay-theme="a" pour ajouter un arrière-plan clair, utilisez data-overlay-theme="b" pour ajouter un arrière-plan de superposition sombre :
Exemple
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>欢迎访问我的主页</h1> </div> <div data-role="main" class="ui-content"> <a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">显示弹窗</a> <div data-role="popup" id="myPopup" class="ui-content" data-overlay-theme="b"> <p>在我身后有个深色背景。</p> </div> </div> <div data-role="footer"> <h1>底部文本</h1> </div> </div> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Les fenêtres contextuelles d'images générales utilisent souvent des superpositions d'arrière-plan :
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>欢迎访问我的主页</h1> </div> <div id="pageone" data-role="main" class="ui-content"> <p>点击图片放大它。</p> <p>注意我们在右上角添加了 "返回按钮"。</p> <a href="#myPopup" data-rel="popup" data-position-to="window"> <img src="http://www.php.cn/wp-content/uploads/2015/10/php.jpeg" alt="Skaret View" style="width:200px;"></a> <div data-role="popup" id="myPopup" data-overlay-theme="b"> <p>这是我的图片！</p> <a href="#pageone" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a><img src="http://www.php.cn/wp-content/uploads/2015/10/php.jpeg" style="width:800px;height:400px;" alt="Skaret View"> </div> </div> <div data-role="footer"> <h1>底部文本</h1> </div> </div> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Remarque : Suivant Dans ce chapitre, vous apprendrez à utiliser les formulaires dans les fenêtres contextuelles.
