จากเนื้อหา
การสร้าง popup ที่แตกต่าง ด้วยวิธี showModalDialog
https://www.ninenik.com/การสร้าง_popup_ที่แตกต่าง_ด้วยวิธี_showModalDialog__-314.html
เป็นการแนะนำการสร้าง รูปแบบ popup อีกรูปแบบหนึ่ง ซึ่งอธิบายในหัวข้อตามลิ้งค์ข้างต้น
อย่างไรก็ตาม ไม่ได้อธิบาย รูปแบบการใช้งานที่ต่อเนื่อง ในหัวข้อดังกล่าว ทำให้การนำเอา
ไปใช้งาน จึงไม่มีประสิทธิภาพมากนัก
ในที่นี้จะขออธิบายการใช้งาน เท่าที่จำเป็นอย่างสมบูรณ์ คือ เป็นไปในรูปแบบดังนี้
เมื่อคลิก แสดง popup และ popup ที่เปิดขึ้นมามีแบบฟอร์มสำหรับบันทึกข้อมูล
ก็จะทำการ submit แบบฟอร์มในหน้า popup ได้
และ สามารถที่จะกำหนดให้ปิด popup นั้นอัตโนมัติเมื่อ submit ข้อมูลแล้ว หรือสร้างปุ่มสำหรับปิด ก็ได้
และ เมื่อปิด หน้า popup แล้ว ให้หน้าที่ เปิด popup รีโหลดตัวเอง หรือ ลิ้งค์ที่หน้าอื่นตามต้องการได้
ตัวอย่าง
https://www.ninenik.com/demo/parent_open_showmodaldialog.php
ตัวอย่างโค้ดไฟล์ทดสอบ จะมี 2 ไฟล์ชื่อ
parent_open_showmodaldialog.php
popup_modaldialog.php
ตัวอย่างโค้ดไฟล์ parent_open_showmodaldialog.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>parent page open showmodaldialog</title>
</head>
<body>
<input name="ddd" type="text" id="ddd" />
<button onclick="popupModal('popup_modaldialog.php',500,200);">Sample Popup</button>
<script type="text/javascript">
var Argu=window; // สร้างตัวแปร สำหรับส่งค่า window object ไปที่ popup
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;";
var str = window.showModalDialog(url+"?"+setUniqe,Argu, diaxFeature);
// กรณีไม่ใช้ setUniqe
// window.showModalDialog(url,"", diaxFeature);
}
</script>
<br />
<br />
หมายเหตุ เพื่อให้เห็นว่าเมื่อปิด popup แล้ว ไฟล์หน้าหลัก รีเฟรส หรือไม่ ให้กรอก ข้อความอะไรก็ได้<br />
ใน textbox ก่อนกดปุ่ม คำว่า Sample Popup
</body>
</html>
ตัวอย่างโค้ดไฟล์ popup_modaldialog.php
<?php
header("Content-type:text/html; charset=UTF-8");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base target="_self">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>popup modaldialog</title>
<style type="text/css">
body{
padding:10px;
color:#FF0;
background:#333;
}
h4{
color:#F90;
text-decoration:underline;
}
</style>
<script type="text/javascript">
var oMyObject = window.dialogArguments; // รับค่า window object มา
oMyObject.location='parent_open_showmodaldialog.php'; // ชื่อไฟล์หน้าหลัก ที่ต้องการ โหลด
<?php
// 3 บรรทัดด้านล่าง เป็นตัวอย่าง ใช้งานกรณีใช้ php ปิด popup
// if(count($_POST)>0){
// echo "window.close();";
// }
?>
</script>
</head>
<body>
<pre>
<?php print_r($_POST); ?>
</pre>
<form id="form1" name="form1" method="post" action="" >
<input type="text" name="textfield" id="textfield" />
<input type="submit" name="button" id="button" value="Submit" />
<input type="button" name="button2" id="button2" value="Close" onclick="window.close();" />
</form>
</body>
</html>
บรรทัดที่ 2-4 สำหรับป้องกันการจำค่าเก่า
บรรทัดที่ 10 จำเป็นต้องใส่ <base target="_self"> เพื่อให้สามารถใช้งาน หน้า popup
สำหรับ submit ข้อมูลในหน้าดังกล่าวได้
บรรทัดที่ 25 เป็นการรับค่า object จากหน้าหลัก ในที่นี้คือ window object หน้าหลัก
บรรทัดที่ 26 ให้ object window หน้าหลักโหลดไฟล์ที่ต้องการ หากต้องการ รีเฟรสหน้า
ที่เปิด popup ให้กำหนดเป็นชือไฟล์ นั้นๆ
บรรทัดที่ 27-32 เป็นเพียงตัวอย่าง หากจะใช้งาน การปิด popup ด้วย php
ทดสอบกรอกค่าอะไรก็ได้ในหน้า popup แล้วกด submit ก็จะแสดงข้อมูลการ submit ใน
หน้านั้น แล้วคลิกที่ปุ่ม close หากต้องการปิด แล้วหน้าหลักจะทำการ รีโหลดอีกครั้ง
