Memposisikan ModalPopup (VB)

oleh Christian Wenz

Unduh PDF

Kontrol ModalPopup di Toolkit Kontrol AJAX menawarkan cara sederhana untuk membuat popup modal menggunakan cara sisi klien. Namun kontrol tidak menawarkan fungsionalitas bawaan untuk memposisikan popup.

Gambaran Umum

Kontrol ModalPopup di Toolkit Kontrol AJAX menawarkan cara sederhana untuk membuat popup modal menggunakan cara sisi klien. Namun kontrol tidak menawarkan fungsionalitas bawaan untuk memposisikan popup.

Langkah-langkah

Untuk mengaktifkan fungsionalitas ASP.NET AJAX dan Control Toolkit, ScriptManager. kontrol harus diletakkan di mana saja pada halaman (tetapi dalam <form> elemen ):

<asp:ScriptManager ID="asm" runat="server" />

Selanjutnya, tambahkan panel yang berfungsi sebagai popup modal. Tombol digunakan untuk menutup popup:

<asp:Panel ID="ModalPanel" runat="server" Width="500px">
 ASP.NET AJAX is a free framework for quickly creating a new generation of more 
 efficient, more interactive and highly-personalized Web experiences that work 
 across all the most popular browsers.<br />
 <asp:Button ID="OKButton" runat="server" Text="Close" />
</asp:Panel>

Setiap kali popup ditampilkan, itu akan diposisikan di tempat tertentu di halaman. Untuk tugas ini, fungsi JavaScript sisi klien dibuat. Pertama-tama mencoba mengakses panel. Jika berhasil, posisi panel diatur menggunakan CSS dan JavaScript (ubah posisi popup sesering mungkin). ModalPopupExtender Namun kontrol juga mencoba memposisikan popup. Oleh karena itu, kode JavaScript berulang kali memposisikan popup, setiap persepuluh detik.

<script type="text/javascript">
 var id = null;
 function movePanel() 
 {
 var pnl = $get("ModalPanel");
 if (pnl != null) 
 {
 pnl.style.left = "50px";
 pnl.style.top = "50px";
 id = setTimeout("movePanel();", 100);
 }
 }

Seperti yang Anda lihat, nilai pengembalian metode setTimeout() JavaScript disimpan dalam variabel global. Ini memungkinkan untuk menghentikan penempatan berulang popup sesuai permintaan, menggunakan clearTimeout() metode :

function stopMoving() 
 {
 clearTimeout(id);
 }
</script>

Sekarang yang tersisa untuk dilakukan adalah membuat browser memanggil fungsi-fungsi ini kapan pun sesuai. Fungsi movePanel() JavaScript harus dipanggil saat tombol diklik yang memicu panel:

<div>
 <asp:Button ID="btn1" runat="server" Text="Launch Modal Popup" 
 OnClientClick="movePanel();" />
</div>

stopMoving() Dan fungsi mulai diputar ketika popup ditutup, ini dapat dipicu dalam ModalPopupExtender kontrol:

<ajaxToolkit:ModalPopupExtender ID="mpe" runat="server"
 TargetControlId="btn1" PopupControlID="ModalPanel" OkControlID="OKButton"
 OnOkScript="stopMoving();" />

Popup modal muncul pada posisi yang ditentukan (Klik untuk melihat gambar ukuran penuh)

Sebelumnya