รหัสตัวอย่างสำหรับการยืนยันผลกระทบของกล่องโต้ตอบการลบ

ผลกระทบมีดังนี้:

ไฟล์ css delcss.css

รหัสมีดังนี้:

การคัดลอกรหัสมีดังนี้:

*{มาร์จิ้น: 0;

#DIV1 {ความกว้าง: 300px; - ดัชนี: 2;

#DIV1 H3 {ความสูง: 20px;

#Overlay {ความกว้าง: 100%;

#closeconfirm {ความกว้าง: 80px; ตำแหน่ง: Absolute;

#TRUECONFIRM {ความกว้าง: 80PX; ตำแหน่ง: Absolute;

#ConfirmCon {Text-Align: Center;

ไฟล์ js convainpop.js

รหัสมีดังนี้:

การคัดลอกรหัสมีดังนี้:

ฟังก์ชั่นยืนยัน (Delobj, Confirmmain, Overlay, Binktitle, Closeconfirm, Trueconfirm) {

this.odelobj = document.getElementById (delobj);

this.odiv = document.getElementById (Confirmmain);

this.ooverlay = document.getElementById (ซ้อนทับ);

this.otitle = document.getElementById (binktitle);

this.ocloseconfirm = document.getElementById (closeconfirm);

this.otrueconfirm = document.getElementById (trueConfirm);

this.oconstart = 0;

this.oconitarget = 0;

this.init ();

-

ยืนยัน. prototype = {

init: function () {

this.oconstart = parseint ((document.documentelement.clientheight- this.odiv.offsetheight)/2-100);

this.oconitarget = parseint ((document.documentelement.clientheight- this.odiv.offsetheight)/2-70);

this.odiv.style.top = this.oconstart+'px';

document.title = this.oconstart+','+this.oconitarget;

var _this = this;

this.odelobj.onclick = function () {

_this.confirmshow ();

-

this.ooverlay.onclick = function () {

_this.titleBink ();

-

this.ocloseconfirm.onclick = this.otrueconfirm.onclick = function () {

_this.confirmhide ();

-

-

ยืนยัน: function () {

this.ooverlay.style.display = 'block';

this.odiv.style.display = 'block';

striveMove (this.ooverlay, {ความทึบ: 30});

striveMove (this.odiv, {top: this.oconitarget, ความทึบ: 100})

-

TitleBink: function () {

var _this = this;

var ilightTimer = null;

var i = 0;

ilightTimer = setInterval (function () {

ถ้า (i%2) {

_this.otitle.style.background = '#60f';

}อื่น{

_this.otitle.style.background = '#ccc';

-

i ++;

ถ้า (i> 5) {

ClearInterval (ilighttimer);

-

}, 50)

-

ยืนยัน: function () {

striveMove (this.ooverlay, {ความทึบ: 0});

this.ooverlay.style.display = 'ไม่มี';

striveMove (this.odiv, {top: this.oconstart, ความทึบ: 0});

-

-

ฟังก์ชั่น striveMove (obj, json, fn) {clearinterval (obj.itimer); obj.itimer = setInterval (ฟังก์ชัน () {var bstop = true; 'ความทึบ') {icur = math.round (parsefloat (getstyle (obj, attr))*100);} else {icur = parseint (getstyle (obj, attr)); )/8; ispeed = ispeed> 0? math.ceil (ispeed): math.floor (ispeed); ถ้า (attr == 'ความทึบ') {obj.style.filter = 'alpha (ความทึบ:'+ (iCur+ ispeed )+')'; obj.style.Opacity = (icur+ispeed)/100;} else {obj.style [attr] = icur+ispeed+'px';} ถ้า (icur! == json [attr]) { bstop = false;}} ถ้า (bstop) {clearinterval (obj.itimer); ถ้า (fn) {fn ();}}}, 30)} ฟังก์ชั่น getstyle (obj, attr) {return obj.currentstyle? ob j currentstyle [attr]: getComputedStyle (obj, false) [attr];}

ใช้

1. เปิดไฟล์

การคัดลอกรหัสมีดังนี้:

<link rel = "stylesheet" type = "text/css" href = "delcss.css"/>

<script src = "convainpop.js"> </script>

2. วิธีการโทร

การคัดลอกรหัสมีดังนี้:

<script>

window.onload = window.onresize = function () {

ใหม่ยืนยัน ('btn', 'div1', 'ซ้อนทับ', 'ชื่อ', 'closeconfirm', 'trueConfirm');

-

</script>

3. เตรียมพร้อม

การคัดลอกรหัสมีดังนี้:

<div id = "div1">

<h3 id = "title"> </h3>

<div id = "ยืนยัน">

แน่ใจหรือว่าต้องการลบมัน?

</div>

<a href = "###" id = "trueConfirm"> ยืนยัน </a>

<a href = "###" id = "closeconfirm"> ยกเลิก </a>

</div>

<div id = "ซ้อนทับ"> </div>

รหัสนี้มีพื้นที่และเขียนรหัส DIV ของคุณเอง ในแท็ก A ในกล่องกำหนดคุณสามารถกรอกที่อยู่ที่ถูกลบ เมื่อคุณคลิกตกลงคุณจะข้ามไปที่วิธีการที่ถูกลบ

รหัสนี้สามารถวางได้ทุกที่ มันไม่ได้ใช้พื้นที่ ผู้เขียนคมมาก

4. ฟิวส์ทริกเกอร์

การคัดลอกรหัสมีดังนี้:

<a id = "btn"> <img src = "/images/default/right/ico_del.gif"/> </a>

เพิ่ม ID = "BTN" ไปยังไอคอนลบซึ่งจะทำให้เกิดเอฟเฟกต์การลบ

หากคุณต้องการปรับเปลี่ยนสไตล์คุณสามารถไปที่ CSS เพื่อปรับเปลี่ยนและปรับ

สรุป: การลบ JS นั้นสวยงามกว่ากล่องป๊อปอัพที่มาพร้อมกับเบราว์เซอร์ ผู้เขียนใช้เพียง 3K JS เพื่อเขียนเอฟเฟกต์นี้ซึ่งน่าทึ่งจริงๆ

ปล. ฉันเพิ่งนำมา

ข้อเสีย: สามารถลบเนื้อหาเพียงหนึ่งเนื้อหาได้ เพราะทุกอย่างมุ่งเน้น ID และเป็นโสด