Bạn muốn khi người dùng truy cập vào trang của bạn thì sẽ hiển thị lên một Popup thông báo. Bạn có thể dùng ModalPopupExtender để thực hiện việc này. Bạn tham khảo bài viết này nhé.
Bạn cần các Stylesheet để áp dụng
body{
background-color:#ECF5FB;
background-image:url(Images/Stage_BG_btm.png);
background-position:center bottom;
background-repeat:repeat-x;
font-family:Tahoma,Verdana,Segoe,sans-serif;
font-size:70%;
padding-bottom:20px;
}
.Container
{
margin:auto;
min-height:400px;
background:#ffffff;
max-width:500px;
min-width:500px;
border:solid 1px #d4d4d4;
padding:0 20px 20px 20px;
}
.ToolBar
{
border:solid 1px #d4d4d4;
padding:10px;
margin-bottom:20px;
}
.GridContainer
{
background:#ECF5FB;
min-height:300px;
border:solid 1px #d4d4d4;
}
.ModalPopupBG
{
background-color: #666699;
filter: alpha(opacity=50);
opacity: 0.7;
}
.popup_Container {
background-color:#fffeb2;
border:2px solid #000000;
padding: 0px 0px 0px 0px;
}
.popupConfirmation
{
width: 300px;
height: 200px;
}
.popup_Titlebar {
background: url(Images/titlebar_bg.jpg);
height: 29px;
}
.popup_Body
{
padding:15px 15px 15px 15px;
font-family:Arial;
font-weight:bold;
font-size:12px;
color:#000000;
line-height:15pt;
clear:both;
padding:20px;
}
.TitlebarLeft
{
float:left;
padding-left:5px;
padding-top:5px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:12px;
color:#FFFFFF;
}
.TitlebarRight
{
background:url(Images/cross_icon_normal.png);
background-position:right;
background-repeat:no-repeat;
height:15px;
width:16px;
float:right;
cursor:pointer;
margin-right:5px;
margin-top:5px;
}
.popup_Buttons
{
margin:10px;
}Trong nội dung (Thẻ <body>) bạn viết code như sau:
<form id="form1" runat="server">
<div style="min-height: 700px;">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Button ID="Button1" runat="server" Text="Click here to show the modal" style="display:none" />
<cc1:modalpopupextender id="ModalPopupExtender1" backgroundcssclass="ModalPopupBG" BehaviorID="modalpopup"
runat="server" cancelcontrolid="btnCancel" okcontrolid="btnOkay" targetcontrolid="Button1"
popupcontrolid="Panel1" drag="true" popupdraghandlecontrolid="PopupHeader">
</cc1:modalpopupextender>
<div id="Panel1" style="display: none;" class="popupConfirmation">
<div class="popup_Container">
<div class="popup_Titlebar" id="PopupHeader">
<div class="TitlebarLeft">
Warnning Popup Header</div>
<div class="TitlebarRight">
</div>
</div>
<div class="popup_Body">
<p>
This is a warnning popup
</p>
</div>
<div class="popup_Buttons" style="display:none">
<input id="btnOkay" value="Done" type="button" />
<input id="btnCancel" value="Cancel" type="button" />
</div>
</div>
</div>
</div>
</form>Các thuộc tính cần hay sử dụng của ModalPopupExtender:
- BackgroundCssClass: là Style nền bên dưới của Popup
- TargetControlID: Chọn Control cho ModalPopup
- PopupControlID: Chọn control view popup (Thường là Panel)
- PopupDragHandleControlID: Nếu bạn muốn có thể kéo thả được popup hãy gán control cho thuộc tính này
- DropShadow: Nếu bạn nuốn popup có bóng đổ thì chọn là true (Mặc định là false)
- CancelControlID: Gán control khi click vào sẽ thoát popup
- X: Tọa độ nằm ngang (trục hoành) suất hiện Popup (mặc định sẽ là giữa màn hình)
- Y: Tọa độ trục tung suất hiện Popup (mặc định sẽ là giữa màn hình)
Ngoài ra còn các thuộc tính khác bạn tự khám phá nhé
Giờ khi muốn hiển thị bạn thực hiện việc gọi sự kiện Show của ModalPopupExtender mdpePopup.Show(); Nếu bạn muốn khi Load trang và hiện ngay thông báo này thì bạn viết hàm như sau:
<script language="javascript" type="text/javascript">
function pageLoad() {
ShowPopup();
setTimeout(HidePopup, 5000);
}
function ShowPopup() {
$find('modalpopup').show();
//$get('Button1').click();
}
function HidePopup() {
$find('modalpopup').hide();
//$get('btnCancel').click();
}
</script>Nhớ là phải đăng ký AjaxToolkit
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
Xem thêm chi tiết tại đây hoặc tải source về