Maison > Article > interface Web > Cliquez sur le point d'interrogation sur la page HTML et une boîte de dialogue apparaîtra (code source ci-joint)
Le contenu de cet article consiste à cliquer sur le point d'interrogation sur la page HTML pour afficher une boîte de dialogue (code source ci-joint). Les amis dans le besoin peuvent s'y référer. j'espère que cela vous sera utile.
La fonction de cette démo : cliquez sur le bouton de la page et un message d'invite apparaîtra sur son bord, et cliquez n'importe où sur la page pour disparaître.
Comme indiqué ci-dessous :
plug-in jquery
plug-in de couche ;>
class="j-help-tips" Cette classe est le noyau et indispensable.Dans l'attribut data-tips : tapez : "1" n'a pas besoin d'être modifié
<html> <head> <link rel="stylesheet" href="style.css"" type="text/css" /> </head> <body> <div style="margin-top: 10%; margin-left: 10%;"> <span class="testSpan"> <i class="edi-icon j-help-tips" data-tips='{"type":"1","txt":"提示内容111..."}'>①</i> </span> <span style="margin: 30px;"> <i class="edi-icon j-help-tips" data-tips='{"type":"1","txt":"提示内容222..."}'>②</i> </span> <span style="margin: 30px;"> <i class="edi-icon j-help-tips" data-tips='{"type":"1","txt":"提示内容333..."}'>③</i> </span> </div> </body> <!-- jquery --> <script src="http://code.jquery.com/jquery-latest.js"></script> <!-- layer --> <script src="layer/layer.js" type="text/javascript"></script> <!-- 提示插件 --> <script src="script.js" type="text/javascript"></script> <script> $(function(){ <!-- 页面初始化加载 --> var tips = new helpTips().init(); }) </script></html>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!