Maison >interface Web >tutoriel HTML >Cliquez sur le point d'interrogation sur la page HTML et une boîte de dialogue apparaîtra (code source ci-joint)
Cliquez sur le point d'interrogation sur la page HTML et une boîte de dialogue apparaîtra (code source ci-joint)
- 不言avant
- 2019-01-23 10:04:598114parcourir
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 : 
1. Plug-ins requis :
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é
- Dans l'attribut data-tips : le contenu txt est le contenu de l'invite.
- Contenu 3.css : (pas nécessaire)
- Le css de cette démo n'est pas nécessaire et n'affecte pas la fonctionnalité ;
<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!