การสร้าง Popup Message แจ้งเตือนด้วยโปรแกรม Dreamweaver [Article ID : 5]

เรื่อง : วิธีสร้าง Popup Message ด้วย Dreamweaver

หลายท่านเข้าไปในเว็บไซค์อื่นๆ คงจะเคยพบหน้าต่างเล็กๆ [หรือไม่เล็ก] ปรากฎขึ้นมาขณะที่เรากดไปที่ปุ่ม หรือกระทำอะไรสักอย่างที่หน้าเว็บของเขา อาจจะปรากฎขึ้นมาเป็นการแจ้งเตือน หรืออื่น ๆ ซึ่งเราเรียกกันว่า Popup Message หรือหน้าต่าง Alert ซึ่งหน้าต่างลักษณะดังกล่าว เราจะสามารถสร้างขึ้นมาได้จาก JavaScript ครับ แต่สำหรับผู้ที่ใช้ Dreamweaver นั้น มี Option ให้เราสามารถสร้างได้อย่างง่ายดาย อย่างไรลองศึกษาจากบทความนี้ดู

ขั้นตอนการสร้าง Popup Message

ก่อนที่จะไปสร้าง Popup Message นั้น ให้เราคิดพิจารณาก่อนว่า เราต้องการให้ Popup Message แสดงขึ้นมาเมื่อเกิดอะไรขึ้นที่หน้าเว็บของเรา เช่น ต้องการให้ Popup Message แสดงขึ้นเมื่อมีการกดไปที่ปุ่มกดบนหน้าเว็บ เป็นต้น เมื่อเราคิดดังกล่าวได้แล้ว ให้ทำการปฏิบัติตามขั้นตอน ดังนี้


1. สร้างปุ่มกด (Button) ให้กับหน้าเว็บ (Insert -> Form -> Button)
2. เมื่อได้ปุ่มกดแล้ว ใช้เมาทฺ์เลือกไปที่ปุ่มกดที่สร้าง
3. จากนั้นทำการเปิดหน้าต่าง Behaviors ขึ้นมา โดยไปที่ Menu -> Window -> Behaviors ดังรูป 4. ที่หน้าต่าง Behaviors คลิกที่เครื่องหมายบวก ( + ) หรือปุ่ม Add behavior แล้วเลือกที่รายการ Popup Message ดังรูป 5. โปรแกรมเปิดหน้าต่าง Popup Message ขึ้นมา ให้ทำการพิมพ์ข้อความที่ต้องการให้แสดงบนหน้าต่าง Popup Message ดังรูป *เมื่อพิมพ์ข้อความแล้วกดที่ปุ่ม OK

6. ทำการ Save ไฟล์และกดปุ่ม F12 เพื่อ Preview ทำการทดสอบ โดยการกดไปที่ปุ่มที่เราสร้างไว้บนหน้าเว็บ ดังรูป *เมื่อกดที่ปุ่ม จะปรากฎหน้าต่าง Popup Message หรือ Alert ขึ้นมา

ทั้งนี้หากทดสอบโดยการกดไปที่ปุ่มแล้ว ไม่ปรากฎ Popup Message แสดงขึ้น ให้ทำการตรวจสอบที่หน้าต่าง Behaviors ว่า Popup Message ที่สร้างนั้น ได้ทำงานร่วมกับ OnClick Event หรือไม่ ดังรูป หากไม่ได้ทำงานที่ OnClick ให้ทำการแก้ไขเสีย (อ่านเรื่อง Event ประกอบ)

การสร้าง Popup Message ตามที่ได้แนะนำมา เราไม่จำเป็นต้องนำไปใช้กับการกดที่ปุ่มอย่างเดียวครับ เราสามารถนำไปใช้กับ Object อื่นก็ได้เช่นกัน เช่น นำไปใช้กับ Image หรือรูปภาพ เมื่อมีคนนำเมาท์มาวางบนรูป (OnMouseOver) จะแสดง Popup Message เป็นต้น ซึ่งขึ้นอยู่กับการคิดพิจารณาของเรา.. อย่างไรลองใช้กันดู...สวัสดีครับ.

About the Author

Mr.Sittichai Raksasuk

Sittichai is a Web Developer and Web Technology Instructor for over 10 yrs. He is also a webmaster of dwthai.com and author jQuery with Dreamweaver (2010). DwThai.Com is a website for web developer using Adobe Dreamweaver.

Contact with him : dwthai@gmail.com

บทความอื่นที่คุณอาจสนใจ

การกำหนด Class ของ CSS มากกว่า 1 คลาสด้วย Apply Multiple Classes

เรื่อง : การกำหนดคลาส CSS ให้แก่ Element ที่ต้องการใช้ Class มากกว่า 1 คลาส Class Selector ของ CSS นั้น ...  

การทำตารางให้มีมุมโค้ง (แบบใช้รูปภาพ)

เรื่อง : ทำตารางให้มีมุมโค้ง (แบบดั่งเดิม/ใช้รูปภาพ) *ปัจจุบัน CSS 3 สามารถทำตารางให้มีมุมโค้งได้โดยไม่ต้องใช้ไฟล์รูปภาพมาตบแต่งครับ...  

จัดรูปแบบบโค้ดด้วย Apply Source Formatting

เรื่อง : จัดรูปแบบบโค้ดด้วย Apply Source Formattingใครที่ชอบเขียนโค้ดด้วยโปรแกรม Dreamweaver อาจจะพบปัญหาที่ว่า พอเขียนโค้...  

CSS Layout ด้วย Dreamweaver ตอนที่ 1

เรื่อง : CSS Layout ด้วย Dreamweaver ตอนที่ 1 CSS Layout ปัจจุบันได้รับความนิยม และได้รับความสนใจอย่างมาก จากกลุ่มผู้ออกแ...