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

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

สร้างปุ่มกด Submit ของ Form ด้วยรูปภาพ

เรื่อง : การสร้างปุ่ม Submit แบบใช้รูปภาพด้วย Dreamweaver เห็นตามเว็บบอร์ดต่าง ๆ มักมีผู้สนใจอยากจะทำปุ่ม Submit ของ Form โ...  

มาเปิดใช้งาน Standard Toolbars เพื่อ Save File ได้อย่างสะดวกกันเถอะ

เรื่อง: เปิดใช้ Standard Toolbars ในโปรแกรม Dreamweaver Standard Toolbars เป็นเครื่องมือที่จะช่วยให้ผู...  

Dreamweaver กับข้อมูล XML

เรื่อง : Dreamweaver กับการใช้งานข้อมูลในรูปแบบ XML ความสามารถหนึ่งที่ Dreamweaver ในเวอร์ชั่น CS3 ที่มีมาให้ด้วย คือ ควา...  

เปิดหน้าต่าง Code เพื่อแก้ไขโค้ดได้อย่างรวดเร็ว

เรื่อง : เปิดหน้าต่างเพื่อแก้ไข Source Code เว็บเพจ (Code Inspector) ทุกครั้งที่ผู้ใช้งานโปรแกรม Dreamweaver ...