RSS

ASP.Net – Popup menu dengan Simple Modals

04 Jul

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)

 
1 Comment

Posted by on July 4, 2010 in Education

 

Tags: , , , , , , ,

One response to “ASP.Net – Popup menu dengan Simple Modals

  1. rumus cepat matematika

    July 4, 2010 at 12:21 pm

    mantap,,makasih banyak infonya…salam hangat,,,

     

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: