jQuery-Popup-Layer-Plug-in Lightbox_me, Verwendungsleitfaden_jquery

Um den interaktiven Effekt der Website zu erhöhen, müssen wir während des Website-Entwicklungsprozesses manchmal Fenster wie Anmeldung, Registrierung, Einstellungen usw. auf der aktuellen Seite öffnen. Diese Fenster sind Ebenen und die Popup-Fenster sind Popup-Ebenen. Es gibt viele Popup-Layer-Plug-Ins in jQuery, aber einige davon werden vom HTML5-CSS3-Browser perfekt unterstützt. In einem Browser wie IE8 oder niedriger kann der gewünschte Effekt jedoch nicht angezeigt werden. Beispielsweise kann das Plug-in jquery.avgrund unter ie8 nicht angezeigt werden.

Das in diesem Artikel vorgestellte Plug-in Lightbox_me kann Mainstream-Browser wie Chrome, Firefox und ie7, ie8, ie9 perfekt unterstützen.

1.Lightbox_me Plug-in-Funktion

Wird zur Anzeige der Popup-Ebene verwendet

2.Lightbox_me offizielle Adresse

http://buckwilson.me/lightboxme/
Unten auf der Webseite finden Sie Demoadressen und allgemeine Attribute.

3. So verwenden Sie Lightbox_me

1. Zitieren Sie zunächst jquery.js und 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. Verwendeter Code

<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 Stil ändern

Die Stiländerung der Popup-Ebene ist sehr einfach. Sie müssen lediglich CSS verwenden können. Zum Beispiel der folgende Code:

#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;
}

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.