Pada Internet Explorer terdapat salah satu fitur untuk membuat pop-up window yang bersifat modal, yaitu ketika window pop-up muncul maka window pemanggilnya tidak bisa diakses (terkunci). Fasilitas ini sangat menarik karena dalam pembuatan aplikasi web seringkali harus membuat window kecil untuk input/pemilihan data.
Kode yang digunakan untuk membuat modal window adalah window.showModalDialog, penggunaannya seperti pada baris berikut.
vReturnValue = window.showModalDialog(sURL [,vArguments] [,sFeatures])
Pada contoh kode di atas, fungsi showModalDialog memiliki tiga argument dengan dua argument optional.
- sURL: merupakan url window yang akan ditampilkan
- vArguments: merupakan arguments yang nilainya dapat diterima/dibaca oleh window target melalui property window.dialogArguments.
- sFeatures: merupakan kumpulan atribut dari pop-up window, masing-masing atribut dipisahkan dengan tanda titik koma. Atribut yang bisa digunakan yaitu:
dialogHeight: sHeight
dialogWidth: sWidth
dialogLeft: sXPos
dialogTop: sYPos
center: { yes | no | 1 | 0 | on | off } default = yes
dialogHide: { yes | no | 1 | 0 | on | off } default = no
edge: { sunken | raised } default = raised
resizable: { yes | no | 1 | 0 | on | off } default = no
scroll: { yes | no | 1 | 0 | on | off } default = yes
status: { yes | no | 1 | 0 | on | off } default = yes
unadorned { yes | no | 1 | 0 | on | off } default = no - vReturnValue: merupakan nilai kembalian dari pop-up window. Nilai kembalian ini dihasilkan dari property window.returnValue yang diset dari pop-up window.
Contoh kode:
Window induk:
function openDialog() {
var retVal = window.showModalDialog(url,"name", "dialogWidth:255px;dialogHeight:250px");
alert(retVal);
}
Pada window pop-up, saat menutup window untuk mendapatkan nilai kembalian property window.returnValue harus diisi.
function closeDialog() {
window.returnValue = 'kembalian';
window.close();
}
Masalah PostBack pada Pop-Up Modal Window
Terdapat masalah pada aplikasi ASP.NET dengan pop-up modal window. Setiap kontrol yang memerlukan postback ke server, hasil pemprosesan server tidak ditampilkan dalam pop-up window yang sama melainkan akan membuka window baru. Hal ini dapat diatasi dengan menambahkan element <base target="_self"> pada header seperti contoh berikut.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PopUp.aspx.cs" Inherits="WebApplication1.PopUp" %> <!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 runat="server"> <title>PopUp Window</title> <base target="_self"></head><body> <form id="form1" runat="server"> <div> <asp:TextBox runat="server" ID="userName"></asp:TextBox> <asp:Button runat="server" ID="submitButton" Text="Submit" /> <input type="button" value="Close" onclick="window.returnValue = true; window.close();" /> </div> </form></body></html>
Demikian tutorial singkat untuk membuat modal window pop-up pada Internet Explorer.
Semoga bermanfaat.