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

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

เปิดใช้งานไม้บรทัด (Rulers) และเส้น Guides Line ไว้ใช้กะระยะแนวเส้น

เรื่อง : เปิดใช้งานไม้บรทัด (Rulers) และเส้น Guides Line ไว้ใช้กะระยะแนวเส้น ในการออกแบบเว็บเพจ บางครั้งเราจำเป็นต้อง...  

เปิดเส้น Grid เพื่อช่วยในการออกแบบเว็บเพจ (Enable Grid)

เรื่อง : เปิดเส้น Grid เพื่อช่วยการออกแบบเว็บเพจ (How to enable Grid view in Dreamweaver) Grid คือ ตาราง ซึ่งผู้ใช้งานโป...  

เก็บ Code ที่ชื่นชอบไว้ใช้นาน ๆ (Snippets Panel)

เรื่อง : การเก็บโค้ดโปรแกรมไว้ใช้กับโปรแกรม Dreamweaver เคยมีแฟนเว็บบางท่านเข้ามาถามว่า "พี่มีวิธีเก็บโค้ดที่เร...  

สร้าง Link เปิดหน้าต่างใหม่ไม่มี Tool Bar

เรื่อง : สร้าง Link เปิดหน้าต่างใหม่ไม่มี Tool Bar มีหลายท่านสอบถามกันมาบ่อยเหลือเกินว่า อยากให้ทำการสร้าง Link ที่พอเมื่อ ...