jQuery lapisan pop timbul plug-in Lightbox_me panduan penggunaan_jquery

Semasa proses pembangunan laman web, untuk meningkatkan kesan interaktif tapak web, kadangkala kita perlu memunculkan tetingkap seperti log masuk, pendaftaran, tetapan, dll. pada halaman semasa. Tetingkap ini adalah lapisan, dan tetingkap timbul ialah lapisan timbul. Terdapat banyak pemalam lapisan pop timbul dalam jQuery, tetapi sebahagian daripadanya disokong dengan sempurna di bawah pelayar HTML5 CSS3. Walau bagaimanapun, dalam pelayar seperti IE8 atau ke bawah, kesan yang diingini tidak boleh dipaparkan. Sebagai contoh, pemalam jquery.avgrund tidak boleh dipaparkan di bawah ie8.

Pemalam Lightbox_me yang diperkenalkan dalam artikel ini boleh menyokong penyemak imbas arus perdana dengan sempurna seperti chrome, firefox dan ie7, ie8, ie9.

1.Fungsi pemalam Lightbox_me

Digunakan untuk memaparkan lapisan pop timbul

2.Lightbox_me alamat rasmi

http://buckwilson.me/lightboxme/
Terdapat alamat demo dan atribut biasa di bahagian bawah halaman web.

3. Cara menggunakan Lightbox_me

1. Petikan pertama jquery.js dan 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. Kod digunakan

<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 ubah suai gaya

Pengubahsuaian gaya lapisan pop timbul adalah sangat mudah, anda hanya perlu boleh menggunakan css. Contohnya, kod berikut:

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

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.