การสร้าง 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

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

Link นี้ไม่ขีดเส้นใต้ (Underline Style)

เรื่อง : สร้าง Text Link ไม่ให้มีเส้นใต้ เห็นมีผู้สอบถามมาหลาย ๆ ท่านว่าทำอย่างไรให้ Link ซึ่งเป็น Text หรือลักษณะข้อความ...  

เรียกใช้ External Stylesheet (CSS) ด้วยการ Drag & Drop

เรื่อง : เรียกใช้ไฟล์ CSS ด้วยการลากวาง โปรแกรม Dreamweaver มีความสามารถด้านการลากและวาง หรือ Drag...  

การสร้างข้อความในแบบ Tooltip กับ Dreamweaver (Spry Tooltip, CS Only)

เรื่อง : การสร้างข้อความแบบ Tooltip ด้วยโปรแกรม Dreamweaver *บทความนี้เฉพาะโปรแกรม Dreamweaver เวอร์ชั่น CS5, CS6 สำหรับ CC ไม่มีให้เรียกใ...  

การทำ Refresh/Redirect ให้ Web Browser ด้วย Dreamweaver

เรื่อง : สั่งให้ Web Browser ทำการ Refersh หรือ Redirect ตัวเอง ใบบางครั้งเรามีความจำเป็นต้องทำการ Refresh ...