หลักการของการใช้ป๊อปอัพ DIV เพื่อแสดงเนื้อหาแบบไดนามิก: ก่อนอื่นใช้ CSS และ HTML เพื่อซ่อนเนื้อหาในป๊อปอัปแล้วใช้ JavaScript (jQuery ในบทช่วยสอนนี้) เพื่อแสดงแบบไดนามิก เอฟเฟกต์นี้ไม่เพียง แต่ใช้ประโยชน์จากพื้นที่เลย์เอาต์ที่ จำกัด เท่านั้น แต่ยังช่วยปรับปรุงประสบการณ์ผู้ใช้ด้วย ที่สำคัญกว่านั้นไม่ส่งผลกระทบต่อเอฟเฟกต์ SEO (เพราะมันมีอยู่จริงในหน้า แต่ในขั้นต้นจะมองไม่เห็น)
1. กำหนด DIV ในหน้า HTML และใช้สิ่งที่เราต้องแสดงใน DIV
การคัดลอกรหัสมีดังนี้:
<body>
<div id = "เข้าสู่ระบบ">
<H2> <img src = "images/close.png"/> การเข้าสู่ระบบเว็บไซต์ </h2>
<form id = "loginform">
<div> </div>
<div> บัญชี: <input type = "text" name = "user" /> </div>
<div> รหัสผ่าน: <อินพุต type = "รหัสผ่าน" name = "pass" /> </div>
<div> <อินพุต type = "ปุ่ม" name = "sub" value = "" /> </div>
</form>
<div> ลงทะเบียนผู้ใช้ใหม่ | ลืมรหัสผ่าน? </div>
</div>
</body>
ภาพหนึ่งมีค่าหนึ่งพันคำ ลองมาดูภาพหน้าจอของเอฟเฟกต์ของหน้าต่างป๊อปอัพ Div นี้:
2. สไตล์ CSS ที่ฉันใช้
การคัดลอกรหัสมีดังนี้:
#login {
ความกว้าง: 350px;
ความสูง: 250px;
ชายแดน: 1px Solid #CCC;
ตำแหน่ง: สัมบูรณ์;
แสดง: บล็อก;
z-index: 9999;
ความเป็นมา: #FFF;
-
#login H2 {
ความสูง: 40px;
สายไฟ: 40px;
TEXT-ALIGN: CENTER;
ขนาดตัวอักษร: 14px;
ระยะห่างจดหมาย: 1px;
สี:#666;
ความเป็นมา: URL (images/login_header.png) ซ้ำ -x;
มาร์จิ้น: 0;
Padding: 0;
ขอบด้านล่าง: 1px Solid #CCC;
เคอร์เซอร์: ย้าย;
-
#login h2 img {
ลอย: ขวา;
ตำแหน่ง: ญาติ;
ด้านบน: 14px;
ขวา: 8px;
เคอร์เซอร์: ตัวชี้;
-
#login div.info {
Padding: 10px 0 5px 0;
TEXT-ALIGN: CENTER;
สี: Maroon;
-
#login div.user, #login div.pass {
ขนาดตัวอักษร: 14px;
สี:#666;
Padding: 5px 0;
TEXT-ALIGN: CENTER;
-
#login input.text {
ความกว้าง: 200px;
ความสูง: 25px;
ชายแดน: 1px Solid #CCC;
ความเป็นมา: #FFF;
ขนาดตัวอักษร: 14px;
-
#login .button {
TEXT-ALIGN: CENTER;
Padding: 15px 0;
-
#login input.submit {
ความกว้าง: 107px;
ความสูง: 30px;
ความเป็นมา: URL (images/login_button.png) ไม่ทำซ้ำ;
ชายแดน: ไม่มี;
เคอร์เซอร์: ตัวชี้;
-
#login. อื่น ๆ {
TEXT-ALIGING: ถูกต้อง;
ช่องว่าง: 15px 10px;
สี:#666;
-
สิ่งสำคัญที่ควรทราบที่นี่คือคำจำกัดความของสไตล์ DIV เพราะเราจำเป็นต้องแสดงศูนย์การแสดงผลเราใช้ตำแหน่งตำแหน่งสัมบูรณ์: สัมบูรณ์; ประการที่สองเนื่องจากเป็นเลเยอร์ป๊อปอัพ DIV จะต้องอยู่ที่รอบนอกสุดดังนั้นดัชนี Z จึงถูกตั้งค่าให้ใหญ่มากที่นี่เราตั้งค่าเป็น Z-index: 9999; อีกประเด็นหนึ่งคือตัวเองถูกซ่อนไว้และจำเป็นต้องตั้งค่าให้แสดง: ไม่มี แต่ที่นี่เราต้องดูเอฟเฟกต์โดยตรงดังนั้นเราจึงสามารถแสดงโดยตรงโดยใช้การแสดงผล: บล็อก;
3. เราต้องปล่อยให้มันแสดงอยู่ตรงกลางดังนั้นเราต้องได้รับความสูงและความกว้างของเบราว์เซอร์ก่อน หากมีการชดเชยแนวนอนหรือแนวตั้งของแถบเลื่อนเราก็ต้องได้รับความยาวและรับตำแหน่งของ DIV ไปยังเบราว์เซอร์ผ่านการคำนวณ
การคัดลอกรหัสมีดังนี้:
$ (เอกสาร). พร้อม (ฟังก์ชั่น ()
-
jQuery.fn.extend ({
กึ่งกลาง: ฟังก์ชั่น (ความกว้างความสูง)
-
ส่งคืน $ (นี่) .css ("ซ้าย", ($ (หน้าต่าง) .width ()-ความกว้าง)/2+$ (หน้าต่าง) .scrollleft ())
CSS ("Top", ($ (หน้าต่าง) .Height ()-ความสูง)/2+$ (หน้าต่าง) .ScrollTop ())
CSS ("ความกว้าง", ความกว้าง)
CSS ("ความสูง", ความสูง);
-
-
-
ปล่อยให้มันแสดงโดยคลิกที่ปุ่ม
การคัดลอกรหัสมีดังนี้:
$ (". เข้าสู่ระบบ") คลิก (ฟังก์ชัน ()
-
$ ("#login"). show (). center (350,250); // แสดงกล่องเข้าสู่ระบบ
-
แผนผังการสืบพันธุ์
4. สามารถลากและวางเฟรมป๊อปอัพได้
การใช้รหัส
การคัดลอกรหัสมีดังนี้:
$ (เอกสาร). พร้อม (ฟังก์ชั่น ()
-
jQuery.fn.extend ({
// drag and drop function
Drag: function () {
var $ tar = $ (นี่);
return $ (this) .mousedown (ฟังก์ชั่น (e) {
if (e.target.tagname == "H2") {
var diffx = e.clientx - $ tar.offset (). ซ้าย;
var diffy = e.clienty - $ tar.offset (). ด้านบน;
$ (เอกสาร) .mousemove (ฟังก์ชั่น (e) {
var left = e.clientx - diffx;
var top = e.clienty - diffy;
ถ้า (ซ้าย <0) {
ซ้าย = 0;
-
อื่นถ้า (ซ้าย <= $ (หน้าต่าง) .scrollleft ()) {
ซ้าย = $ (หน้าต่าง) .scrollleft ();
-
อื่นถ้า (ซ้าย> $ (หน้าต่าง) .width () +$ (หน้าต่าง) .scrollleft () - $ tar.width ()) {
ซ้าย = $ (หน้าต่าง) .width () +$ (หน้าต่าง) .scrollleft () -$ tar.width ();
-
if (top <0) {
ด้านบน = 0;
-
อื่นถ้า (top <= $ (window) .scrolltop ()) {
top = $ (window) .scrolltop ();
-
อื่นถ้า (บนสุด> $ (หน้าต่าง) .Height () +$ (หน้าต่าง) .ScrollTop () - $ tar.Height ()) {
top = $ (window) .height () +$ (หน้าต่าง) .scrolltop () - $ tar.height ();
-
$ tar.css ("ซ้าย", ซ้าย + 'px'). css ("top", top + 'px');
-
-
$ (เอกสาร) .MouseUp (function () {
$ (นี่) .Unbind ("Mousemove");
$ (นี่) .UNBIND ("MouseUp")
-
-
-
-
-
ที่นี่เราคลิกและลากองค์ประกอบ H2 ในเนื้อหา DIV เท่านั้น หากต้องการ DIV ทั่วโลกก็สามารถแก้ไขได้ หลักการลาก: เมื่อเมาส์กดบนองค์ประกอบที่ระบุให้ได้พิกัดของจุดเมาส์และผ่านการคำนวณภาพจะถูกย้ายไปยังตำแหน่งที่สอดคล้องกัน เมื่อเมาส์คลิกเพื่อยกเลิกเหตุการณ์การกดที่เกี่ยวข้องจะถูกยกเลิกและหน้ายังคงอยู่
เรียกวิธีการลาก
การคัดลอกรหัสมีดังนี้:
$ ("#login"). drag ();
ตอนนี้เราสามารถคลิกแถบชื่อเรื่องของกล่องป๊อปอัพแล้วลากในเบราว์เซอร์ตามที่ต้องการ