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

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

ตัวอย่าง

Sample Popup

วิธีสร้าง 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>