recherche

Maison >interface Web >js tutoriel >Exemple de code de fenêtre contextuelle Pure js dans le coin inférieur droit

Exemple de code de fenêtre contextuelle Pure js dans le coin inférieur droit

高洛峰
高洛峰original
2017-03-12 14:21:242307parcourir

L'éditeur suivant vous apportera un exemple de code js pur pour la fenêtre pop-up dans le coin inférieur droit. L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur pour jeter un oeil

Cette fenêtre pop-up a l'effet indiqué ci-dessous :

Exemple de code de fenêtre contextuelle Pure js dans le coin inférieur droit

Lorsque vous ouvrez la page Web, cette fenêtre contextuelle apparaîtra en fondu, puis cliquez sur le bouton de fermeture dans le coin supérieur droit, qui est en fait, un & times ; Fade out

utilise un fondu d'entrée et un fondu de sortie car cela évite d'avoir à utiliser directement Jquery pour faire un fondu d'entrée et de sortie si la fenêtre est. déplacé de bas en haut, le paramètre position de p doit également être pris en compte. Problème, ce problème implique également une série de problèmes de compatibilité, qui sont très graves

La raison pour laquelle c'est le cas. appelée fenêtre contextuelle dans le coin inférieur droit de pure js est parce que sur n'importe quelle page, il vous suffit d'introduire Jquery comme suit. Ce Js peut être utilisé. La seule chose à noter est que Jquery doit être introduit avant ce Js. Puisque mon JS est entièrement écrit sur Jquery, il ne fonctionnera pas sans le support de Jquery 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>消息提醒</title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script src="notice_pop.js" type="text/javascript"></script>
</head>
<body>

</body>
</html>

Le code Js notice_pop.js de cette fenêtre pop-up est le suivant : 

function pop_init(title,content) {
	//取当前浏览器窗口大小
	var windowWidth=$(document).width();
	var windowHeight=$(document).height();
	//弹窗的大小
	var weight=320;
	var height=240;
	$("body").append(
	"<p id=&#39;pop_p&#39;style=&#39;display:none;position:absolute;border:1px solid #e0e0e0;z-index:99;width:"+weight+"px;height:"+height+"px;top:"+(windowHeight-height-10)+"px;left:"+(windowWidth-weight-10)+"px&#39;>"+
		"<p style=&#39;line-height:32px;background:#f6f0f3;border-bottom:1px solid #e0e0e0;font-size:14px;padding:0 0 0 10px;&#39;>" +
			"<p style=&#39;float:left;&#39;><b>"+title+"</b></p><p style=&#39;float:right;cursor:pointer;&#39;><b onclick=&#39;pop_close()&#39;>×</b></p>" +
			"<p style=&#39;clear:both&#39;></p>"+
		"</p>" +
		"<p id=&#39;content&#39;>" +
			 content+
		"</p>"+
	"</p>"
	);
}
function pop_close(){
	$(&#39;#pop_p&#39;).fadeOut(400);
}
$(document).ready(function(){
	pop_init("公告信息","<ul><li>sss</li><li>sss</li></ul>");
	$(&#39;#pop_p&#39;).fadeIn(400);
});

On dit que c'est Jquery, mais c'est en fait plus de contenu HTML La clé est de définir la position de p sur absolu, d'ajouter un 1px gris bordez-le, réglez-le sur le zindex le plus élevé, puis disposez-le à la position hauteur/largeur du navigateur - sa taille, puis placez-le dans le coin inférieur droit

Dans le sous-panneau de titre à l'intérieur, placez deux flotteurs. p, un à gauche et un à droite, pour obtenir l'effet de séparer le titre de la fenêtre contextuelle et le bouton de fermeture des deux côtés, puis utilisez clear:both pour effacer ce float. Faites place au contenu suivant.

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：Explication détaillée de la programmation orientée objet JSArticle suivant：Explication détaillée de la programmation orientée objet JS

Articles Liés

Voir plus