Cấp bậc tác giả:

DOTNET

Popup thông báo khi load trang với ModalPopupExtender(Rất thích hợp làm quảng cáo giữa màn hình)

Được viết bởi QuangIT ngày 14/09/2012 lúc 03:52 PM
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é.
  • 0
  • 3274
Tải tệp tin: Click ở đây

Popup thông báo khi load trang với ModalPopupExtender(Rất thích hợp làm quảng cáo giữa màn hình)


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ề

Nguồn bài viết: Dngaz.com

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML