Maison >interface Web >js tutoriel >jQuery réalise l'effet d'un clic pour faire apparaître la fenêtre du calque Div (peut être fermée et déplacée)_jquery

jQuery réalise l'effet d'un clic pour faire apparaître la fenêtre du calque Div (peut être fermée et déplacée)_jquery

WBOYoriginal: 2016-05-16 15:38:301103parcourir

L'exemple de cet article décrit comment jQuery peut obtenir l'effet d'afficher la fenêtre du calque Div en cliquant dessus. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Il s'agit d'un effet de boîte contextuelle déplaçable et fermable implémenté par jquery. Il existe de nombreux effets similaires sur Internet. Il n'est pas difficile d'obtenir cet effet sur la page Web. C'est plus pratique. D'accord, ce code montre comment implémenter une fenêtre contextuelle fermable en combinant le code CSS, le code JavaScript et le HTML. Cliquez sur le bouton de fermeture avec la souris pour la fermer, puis le bouton d'ouverture s'affichera. Cette fenêtre de calque apparaît.

La capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démo en ligne est la suivante :

http://demo.jb51.net/js/2015/js-close-able-alert-dlg-style-codes/

Le code spécifique est le suivant :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>windows</title>
<style>
#main{position: absolute;top: 10%;left: 10%;}
#title{width: 500px;height: 19px;border-top: #85ABE4 1px solid;border-right: #222 1px solid;border-left: #85ABE4 1px solid;border-bottom: none;background: #5B8BD9;}
#content{border: #85ABE4 1px solid;border-top: none;width: 500px;height: 300px;}
#content img{width: 500px;height: 300px;}
#off{float: right;cursor: pointer;}
.none{display: none;}
.show{display: block;}
#open{background: #fff;border: #555 1px solid;height: 13px;width: 50px;position: absolute;left: 50px;top: 400px;cursor: pointer;}
#open marquee{font-size: 12px;color: #555;}
#img{background: url(images/s.jpg) no-repeat;float: right;width: 49px;height: 19px;}
#img: hover{background: url(images/sh.jpg) no-repeat;}
#ten{float: left;width: 400px;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//设置标题栏
document.title="0.0 WINDOW";
//窗口的拖动
var bool=false;
var offsetX=0;
var offsetY=0;
$("#main").mousedown(function(){
bool=true;
offsetX = event.offsetX;
offsetY = event.offsetY;
$("#ten").css('cursor','move');
})
 .mouseup(function(){
  bool=false;
  })
 $(document).mousemove(function(e){
  if(!bool)
  return;
  var x = event.clientX-offsetX;
  var y = event.clientY-offsetY;
  $("#main").css("left", x);
  $("#main").css("top", y);
  })
//窗口的关闭
$("#img").click(function() {
$("#main").removeClass("show");
$("#main").addClass("none");
$("#open").addClass("show"); });
$("#open").click(function() {
$("#main").removeClass("none");
$("#main").addClass("show");
$("#open").removeClass("show");
$("#open").addClass("none");
});
});
</script>
</head>
<body>
<div id="main" class="show">
<div id="title">
<div id="ten"></div>
<div id="img" title="close"></div>
</div>
<div id="content">
</div>
</div>
<div id="open" class="none" title="">
<marquee>点击弹出窗口</marquee>
</div>
</body>
</html>

J'espère que cet article sera utile à la programmation jQuery de chacun.

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：JS implémente un effet de menu pliant animé adapté aux compétences d'utilisation en arrière-plan_javascriptArticle suivant：JS implémente un effet de menu pliant animé adapté aux compétences d'utilisation en arrière-plan_javascript

Articles Liés

Voir plus