เพิ่มเติม การใช้งาน popup แบบ showModalDialog อย่างสมบูรณ์
29 December 2010จากเนื้อหา
การสร้าง popup ที่แตกต่าง ด้วยวิธี showModalDialog
http://www.ninenik.com/การสร้าง_popup_ที่แตกต่าง_ด้วยวิธี_showModalDialog__-314.html
เป็นการแนะนำการสร้าง รูปแบบ popup อีกรูปแบบหนึ่ง ซึ่งอธิบายในหัวข้อตามลิ้งค์ข้างต้น
อย่างไรก็ตาม ไม่ได้อธิบาย รูปแบบการใช้งานที่ต่อเนื่อง ในหัวข้อดังกล่าว ทำให้การนำเอา
ไปใช้งาน จึงไม่มีประสิทธิภาพมากนัก
ในที่นี้จะขออธิบายการใช้งาน เท่าที่จำเป็นอย่างสมบูรณ์ คือ เป็นไปในรูปแบบดังนี้
เมื่อคลิก แสดง popup และ popup ที่เปิดขึ้นมามีแบบฟอร์มสำหรับบันทึกข้อมูล
ก็จะทำการ submit แบบฟอร์มในหน้า popup ได้
และ สามารถที่จะกำหนดให้ปิด popup นั้นอัตโนมัติเมื่อ submit ข้อมูลแล้ว หรือสร้างปุ่มสำหรับปิด ก็ได้
และ เมื่อปิด หน้า popup แล้ว ให้หน้าที่ เปิด popup รีโหลดตัวเอง หรือ ลิ้งค์ที่หน้าอื่นตามต้องการได้
ตัวอย่าง
http://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 หากต้องการปิด แล้วหน้าหลักจะทำการ รีโหลดอีกครั้ง
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
13 Oct 08 คำสั่ง SQL BETWEEN อ่าน 9316 26 Oct 08 แสดง popup window ตรงกลาง อ่าน 10425 17 Aug 09 สร้างเมนู เทคนิค ลูกตาปลา ด้วย jQuery อย่างง่าย อ่าน 5726 13 Oct 11 แนะนำการใช้งาน การเชื่อมต่อ facebook ด้วย php sdk v.3.1.1 อ่าน 886 28 May 10 แสดง การแจ้งเตือน ให้เปิด หรือ บันทึกไฟล์ที่ดาวน์โหลด ด้วย php อ่าน 1258 24 Mar 10 เริ่มต้น รู้จัก ก่อนการใช้งาน google map api อ่าน 5569 21 Mar 11 การสร้างปุ่ม facebook ล็อกอิน เว็บไซต์ แบบแสดงรูป และกำหนดเพิ่มเติม อ่าน 2701 22 Apr 10 ประยุกต์ tooltip มากกว่า 1 ตัวใน ฟอร์ม ด้วย jQuery อ่าน 5185 29 Mar 09 ทบทวนการตัดข้อความด้วย PHP อ่าน 3920 10 Sep 10 การแสดง ข้อมูลใน infowindows ของ google map ด้วย ajax ใน jQuery อ่าน 3342 07 Sep 10 ใช้ ckeditor กับ filemanager ด้วย php รองรับ ฟังก์ชัน javascript อ่าน 3495 02 Apr 10 สร้าง layout 3 คอลัมน์ column ให้ สูงเท่ากัน ด้วย เทคนิค css อ่าน 4727 10 May 10 แก้ปัญหา ปุ่ม back ปุ่ม forward กับการใช้งาน ajax โหลดหน้าเพจ ด้วย jQuery plugin อย่างง่าย อ่าน 3326 31 Jul 10 javascript เรียกฟังก์ชัน ใน parent จาก iframe อ่าน 2818 10 Dec 09 ประยุกต์ เทคนิค jQuery เลื่อน scrollbar ขึ้นลง ตามเมาส์ สำหรับ div และ textarea อ่าน 4078 09 Nov 11 แนวทางการสร้างเมนูหลายภาษา อย่างง่ายด้วย php และ javascript อ่าน 1205 21 Aug 10 เริ่มใช้ และ ประยุกต์ CKEditor ให้ใช้งานง่าย เต็มความสามารถ อ่าน 3608 08 Oct 08 การสร้างปุ่มด้วย CSS อ่าน 4677 24 Jun 11 แก้ปัญหา event onchange ของ input type file ไม่ทำงานทันทีใน ใน IE อ่าน 754 02 Dec 10 แทรก emoticon ด้วย javascript ฟังก์ชัน ให้กับ ckeditor อ่าน 2320