Cliquez sur le point d'interrogation sur la page HTML et une boîte de dialogue apparaîtra (code source ci-joint)-tutoriel HTML-php.cn

Cliquez sur le point d'interrogation sur la page HTML et une boîte de dialogue apparaîtra (code source ci-joint)

不言

Libérer： 2019-01-23 10:05:23

avant

8112 Les gens l'ont consulté

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é

Dans l'attribut data-tips : le contenu txt est le contenu de l'invite.

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>

Copier après la connexion

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!