Maison  >  Article  >  interface Web  >  HTML implémente une boîte de dialogue simple

HTML implémente une boîte de dialogue simple

小云云
小云云original
2017-12-08 15:25:377467parcourir

Dans cet article, nous partagerons avec vous une simple boîte d'invite implémentée en HTML. Étant donné que le projet nécessite une simple boîte d'invite, il suffit de placer la souris dessus pour demander des informations pertinentes. tiers, il est donc encapsulé ici. Une méthode HTML très simple.

<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script> 
function show(obj,id) { 
var objp = $("#"+id+""); 

/**
   这里我们可以使用ajax从数据库获取数据动态改变提示框里的内容
   $.post('./test.php',{act:"ajax_get_ifo", goods_id:goods_id}, function (res){
                objp.html("<br>"+res.data+"<br>");
            }, 'json');
**/
$(objp).css("display","block"); 
$(objp).css("left", event.clientX + 30); 
$(objp).css("top", event.clientY - 45); 
} 
function hide(obj,id) { 
var objp = $("#"+id+""); 
$(objp).css("display", "none"); 
} 
</script> 


<p id="myp1" style="position:absolute;display:none;border:1px solid silver;background:gray;filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.7;"> 
提示1效果 
</p> 
<p id="myp2" style="position:absolute;display:none;border:1px solid silver;background:silver;filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 1.0;"> 
不知道你们在干嘛呢,<br/>哈哈哈哈
</p> 

<a id="t1" onMouseOver="javascript:show(this,&#39;myp1&#39;);" onMouseOut="hide(this,&#39;myp1&#39;)">鼠标放上去1</a> 
<br><br><br><br><br> 
<a id="t2" onMouseOver="javascript:show(this,&#39;myp2&#39;);" onMouseOut="hide(this,&#39;myp2&#39;)">鼠标放上去2</a>

HTML implémente une boîte de dialogue simple

Recommandations associées :

Que diriez-vous CSS Explication détaillée d'exemples d'implémentation de boîtes d'invite

Utilisation de CSS pour implémenter des boîtes d'invite d'info-bulle entièrement compatibles

Quatre types de boîte d'invite Tutoriel codes_PHP

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:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent:HTML s'échappant dans ReactArticle suivant:HTML s'échappant dans React