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)

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:598089parcourir

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 :
Cliquez sur le point d'interrogation sur la page HTML et une boîte de dialogue apparaîtra (code source ci-joint)

1. Plug-ins requis :

  • plug-in jquery

  • plug-in de couche ;>

    class="j-help-tips" Cette classe est le noyau et indispensable.

l'attribut data-tips est requis.

Dans l'attribut data-tips : tapez : "1" n'a pas besoin d'être modifié
  1. Dans l'attribut data-tips : le contenu txt est le contenu de l'invite.
  2. Contenu 3.css : (pas nécessaire)
  3. Le css de cette démo n'est pas nécessaire et n'affecte pas la fonctionnalité ;
Contenu 4.javascript : (noyau)
<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=&#39;{"type":"1","txt":"提示内容111..."}&#39;>①</i>
            </span>
            
            <span style="margin: 30px;">
                <i class="edi-icon j-help-tips" data-tips=&#39;{"type":"1","txt":"提示内容222..."}&#39;>②</i>
            </span>
            
            <span style="margin: 30px;">
                <i class="edi-icon j-help-tips" data-tips=&#39;{"type":"1","txt":"提示内容333..."}&#39;>③</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!

    Déclaration:
    Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer