Berikut langkah – langkahnya :
- Tambahkan Code berikut pada source halaman web pada bagian paling atas. Code ini digunakan untuk mengenali AjaxControlToolkit yang kita tambahkan ke toolbox kita. Maka jika kita menambahkan AjaxControlToolkit pada halaman web kita akan didahului dengan prefix
- Kita akan mencoba membuat sebuah popup yang didalamnya berisi gambar, textbox dan beberapa button:
- Buatlah panel dengan mendrag dari standard toolbox. Komponen-komponen yang akan ditampilkan dalam popup diletakkan dalam bagian ini.
Id panel = Panel1
Id button OK = OKbutton
Id button cancel = cancelbutton
- Tambahkan button ( ID = mybutton )diluar Panel tersebut, hal ini berguna untuk menampilkan popupextender, jadi saat button tersebut di click maka akan muncul popup nya.
- Tambahkan sedikit CSS untuk memperbaiki tampilan
.modalback
{
background-color:Gray;
filter:alpha (opacity=70);
opacity:0.7;
}
.modalpopup
{
background-color:#ffffdd;
border-width:3px;
border-style:solid;
border-color:Gray;
padding:3px;
width:250px;
}
- Tambahkan modalpopup extender dan berikan codingan sebagai berikut :
- Hasilnya sebagai berikut saat kita menekan button mybutton maka halaman web akan disamarkan dan kita hanya bisa mengakses bagian web yang ada dalam panel1, cukup menarik bukan. Silakan mencoba........
0 komentar:
Posting Komentar