Plug-in de couche contextuelle jQuery Lightbox_me guide d'utilisation_jquery

Pendant le processus de développement du site Web, afin d'augmenter l'effet interactif du site Web, nous devons parfois faire apparaître des fenêtres telles que la connexion, l'inscription, les paramètres, etc. sur la page actuelle. Ces fenêtres sont des calques et les fenêtres contextuelles sont des calques contextuels. Il existe de nombreux plug-ins de couches contextuelles dans jQuery, mais certains d'entre eux sont parfaitement pris en charge sous le navigateur HTML5 CSS3. Cependant, dans un navigateur tel qu'IE8 ou version antérieure, l'effet souhaité ne peut pas être affiché. Par exemple, le plug-in jquery.avgrund ne peut pas être affiché sous ie8.

Le plug-in Lightbox_me présenté dans cet article peut parfaitement prendre en charge les navigateurs grand public tels que Chrome, Firefox et ie7, ie8, ie9.

1.Fonction plug-in Lightbox_me

Utilisé pour afficher le calque contextuel

2.Adresse officielle de Lightbox_me

http://buckwilson.me/lightboxme/
Vous trouverez des adresses de démonstration et des attributs communs au bas de la page Web.

3. Comment utiliser Lightbox_me

1. Commencez par citer jquery.js et jquery.lightbox_me.js

<script src="/ref/jquery-1.7.2.min.js"></script>
<script src="/ref/lightbox_me/jquery.lightbox_me.js"></script>

2. Code utilisé

<script type="text/javascript">
$(function() {
  $('#login').click(function(e) {
    $('#loginbox').lightbox_me({
      centered: true, 
      onLoad: function() { 
        $('#loginbox').find('input:first').focus()
      }
    });
    e.preventDefault();
  });
  $('#cancel').click(function(){
    $('#loginbox').trigger('close');
    //alert('aaa');
  });
});
</script>

4.Lightbox_me modifier le style

La modification du style du calque pop-up est très simple, il suffit de pouvoir utiliser le CSS. Par exemple, le code suivant :

#loginbox{
  width:400px;
  display:none;
  background:white;
  border:1px solid #ccc;
}
body {
  font-size:12px;
  font-family:微软雅黑;
}
.loginbox-title {
  background: #eef2f7;
border-bottom: 1px solid #ccc;
  margin-bottom:10px;
  padding:8px 0;
  font-size:14px;
  text-align:center;
  
}
.loginbox-footer{
  padding:8px 0;
  border-top:1px solid #ccc;
  text-align:center;
  background:#eef2f7;
}
table {
  width:98%;
  margin:0 8px;
}
th, td {
  padding:8px 0;
}
th {
  text-align:left;
}
.big {
  padding:5px 18px;
}

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.