Popup menu merupakan salah satu bentuk penyajian menu yang sering digunakan pada aplikasi” baik desktop maupun web. Hal ini karena popup memiliki kesan yang unik dan berkelas.
Pada postingan kali ini saya akan memberikan sedikit tips dan tutorial dalam membuat popup menu pada ASP.Net dengan menggunakan bantuan jQuery bernama Simple Modals. Namun sebelum anda membuat popup tersebut, terlebih dahulu anda harus menyiapkan beberpa file yang dibutuhkan untuk membuat simple modal tersebut. (Pada akhir postingan akan diberikan direct link untuk mendownload).
Langkah-langkah yang dibutuhkan dalam membuat popup menu.
| 1. | Copy 3 folder simple modals (“css”, “img”, “js”) kedalam folder project website anda. |
| 2. | Buat dan perhatikan code aspx berikut
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="BasicModal.aspx.cs" Inherits="BasicModal" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/>
<link type='text/css' href='css/basic.css' rel='stylesheet' media='screen' />
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.simplemodal.js'></script>
<script type='text/javascript' src='js/basic.js'></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<div id='basic-modal'>
<input type=\"button\" value=\"modals\" class='basic' name='basic' >
</div>
<div id=\"basic-modal-content\" style=display:none;>
Anda Berhasil
</div>
</body>
</html>
|
| 3. | Jalankan web dan tekan button yang telah dibuat kemudian lihat hasilnya |
Hal yang perlu diperhatikan adalah…
| 1. | link yang diletakan diatas head, merupakan link untuk me-reference css dan behind code yang digunakan untuk menampilkan basic modal. (mutlak disertakan) |
| 2. | terdapat dua “div”. * Div pertama berikan ID=’basic-modal’ bertujuan sebagai trigger untuk memunculkan popup. Dapat diisi dengan button / link * Div kedua berikan ID=’basic-modal-content’ ditujukan sebagai penampung / popup yang akan dimunculkan. Dapat diisi berbagai component yang akan dimunculkan |
Sangat mudah bukan dan untuk hasilnya silahkan anda coba sendiri.
berikut link untuk mendownload component yang dibutuhkan. (DOWNLOAD DISINI)
mantap,,makasih banyak infonya…salam hangat,,,