2/23/12

Popup thông báo khi load trang với ModalPopupExtender

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
<style>
    .hmwebdiv
    {
     padding: 0px;
     border: 1px solid gray;
     font: normal 12px Verdana;
     line-height: 22px;
     background-color: #FFFFFF;
    }
    .hmweb_pu{
     background-color:Gray;
     filter:alpha(opacity=70);
     opacity:0.7;
    }
    </style>
Trong nội dung (Thẻ <body>) bạn viết code như sau:
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
    <asp:Button ID="btpu" runat="server"  Style="display: none" />
    <cc1:ModalPopupExtender
        ID="mdpePopup"  
        BackgroundCssClass="hmweb_pu"  
        runat="server" Enabled="True" 
        TargetControlID="btpu" 
        PopupControlID="pnlPopup" 
        PopupDragHandleControlID="pnlPopup_Hand" 
        DropShadow="true"
        CancelControlID="btClose" />
    <asp:Panel ID="pnlPopup" 
        runat="server" CssClass="hmwebdiv"  
        Width="450px" Height="300px" 
       Style="display: none" >
    <asp:Panel ID="pnlPopup_Hand" 
        runat="server" Width="100%" Height="100%">
        NỘI DUNG THÔNG BÁO
    </asp:Panel>
    </asp:Panel>
   </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 trong hàm Pae_Load như sau:
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        mdpePopup.Show();
    }
}
theo hmweb
Bookmark and Share

0 comments:

Post a Comment

Next previous home

Cộng đồng yêu thiết kế Việt Nam Thiet ke website, danang