การสร้าง popup ที่แตกต่าง ด้วยวิธี showModalDialog

เขียนเมื่อ 13 ปีก่อน โดย Ninenik Narkdee
showmodaldialog popup

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ showmodaldialog popup

ดูแล้ว 28,325 ครั้ง




การสร้าง หน้า window ใหม่ หรือ popup window ที่พิเศษ กว่า popup ที่ใช้ฟังก์ชัน window.open  ด้วยการใช้วิธีที่เรียกว่า showModalDialog 
dialog หรือ popup ทีสร้างจากวิธีแบบ showModalDialog  มีประโยชน์สำหรับการที่จะทำให้ผู้ใช้ให้ความสนใจต่อเนื้อหาในหน้าที่แสดง ซึ่งยังสามารถใช้แสดงข้อความที่มีความสำคัญที่ผู้ใช้ควรทำตามคำแนะนำหรือ ได้รับทราบเป็นข้อมูลไว้ ก่อนที่ดำเนินการอื่นๆ ต่อไป

ตัวอย่าง


วิธีสร้าง popup แบบ window.showModalDialog จะมีความคล้ายกับ วิธีการใช้งาน window.open คือการรับค่าชื่อไฟล์ หรือ url ที่ต้องการ แล้วเปิดเป็นหน้าต่างใหม่
ความแตกต่าง
window.showModalDialog จะสร้างหน้าต่างใหม่เสมอ แม้ว่าบราวเซอร์จะกำหนดให้เปิดหน้าต่างใหม่แบบ Tab ส่วน window.open จะขึ้นอยู่กับการตั้งค่าของ บราวเซอร์
และข้อแตกต่างที่สำคัญ คือ ผู้ใช้ต้องทำการปิด popup นั้นลงก่อน จึงจะใช้งานหน้าเว็บที่เปิด popup นั้นขึ้นมาได้ เป็นการโฟกัสผู้ใช้ไปยัง popup นั้นไปในตัว

การวิธีการข้างต้นผู้ใช้ยังสามารถใช้งานหน้าต่างอื่น หรือโปรแกรมอื่นได้ตามปกติ
 


ตัวอย่างโค้ด  (ทดสอบทำงานได้ดีใน IE และ Firefox ส่วนบราวเซอร์อื่น ทำงานคล้าย window.open)

 

<button onclick="popupModal('sample_data.php',500,200);">Sample Popup</button>

<script type="text/javascript">
function popupModal(url,width,height){
	var myDate=new Date();
	var setUniqe=myDate.getTime(); // ใช้สำหรับ ป้องกันการ cache กรณีกำลังทดสอบ
	
	var diaxFeature="dialogWidth:"+width+"px;"
	+"dialogHeight:"+height+"px;"
/*	+"dialogLeft:"+width+"px;"
	+"dialogTop:"+width+"px;"		*/
	+"center:yes;"
	+"edge:raised;" // sunken | raised 
	+"resizable:no;"
	+"status:no;"
	+"scroll:no;";	
	window.showModalDialog(url+"?"+setUniqe,"", diaxFeature);
	// กรณีไม่ใช้ setUniqe
	//  window.showModalDialog(url,"", diaxFeature); 
}
</script>

 



กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ











URL สำหรับอ้างอิง





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ