Tạo popup cho website bằng Asp.net

Bài viết này sẽ hướng dẫn các bạn tạo Popup cho website được lập trình bằng ASP.Net dưới dạng một user control

Demo

Bạn đang cần một đoạn code để giúp tạo Popup cho website nhằm phục vụ chiến dịch quảng cáo, hay social media marketing nào đó? vậy thì bài viết này bạn nên đọc để không phải bỏ lỡ một cách rất đơn giản trong việc tạo popup.
Sau khi học xong bài này, các bạn sẽ làm được như demo bên dưới đây.

Lập trình

Code design

Bạn cần đăng ký với giao diện của bạn một control bằng đoạn code sau

<%@ Register Assembly="ASP.Web.UI.PopupControl" 
    Namespace="ASP.Web.UI.PopupControl"
    TagPrefix="ASPP" %>

<%@ Register Assembly="ASP.Web.UI.PopupControl"

Namespace="ASP.Web.UI.PopupControl"

TagPrefix="ASPP" %>

Sau đó, nếu bạn muốn hiện thị Popup thì chỉ cần vứt đoạn code sau vào trong thẻ body là được

<ASPP:PopupPanel HeaderText="This is Header" ID="pup" 
          runat="server" OnCloseWindowClick="MycloseWindow">
    <PopupWindow runat="server">
        <ASPP:PopupWindow ID="PopupWindow1" 
        Visible="false" runat="server">
            <asp:Label ID="lbl" runat="server">ssssssssss</asp:Label>
            <br />
            <asp:TextBox ID="txt" AutoPostBack="true" 
            runat="server"></asp:TextBox>
        </ASPP:PopupWindow>
        <ASPP:PopupWindow ID="PopupWindow2" runat="server">
            <div align="center" style="width: 500px; height: 300px">
                <asp:Label ID="Label1" runat="server">nnnnn</asp:Label>
                <br />
                <asp:TextBox ID="TextBox1" AutoPostBack="true" 
                runat="server"></asp:TextBox>
                <asp:Button ID="in" runat="server" Text="sss" />
                <asp:TextBox ID="TextBox2" AutoPostBack="true" 
                runat="server"></asp:TextBox>
            </div>
        </ASPP:PopupWindow>
    </PopupWindow>
</ASPP:PopupPanel>

<ASPP:PopupPanel HeaderText="This is Header" ID="pup"

runat="server" OnCloseWindowClick="MycloseWindow">

<ASPP:PopupWindow ID="PopupWindow1"

Visible="false" runat="server">

<asp:Label ID="lbl" runat="server">ssssssssss</asp:Label>

<br />

<asp:TextBox ID="txt" AutoPostBack="true"

runat="server"></asp:TextBox>

</ASPP:PopupWindow>

<ASPP:PopupWindow ID="PopupWindow2" runat="server">

<asp:Label ID="Label1" runat="server">nnnnn</asp:Label>

<br />

<asp:TextBox ID="TextBox1" AutoPostBack="true"

runat="server"></asp:TextBox>

<asp:Button ID="in" runat="server" Text="sss" />

<asp:TextBox ID="TextBox2" AutoPostBack="true"

runat="server"></asp:TextBox>

</div>

</ASPP:PopupWindow>

</PopupWindow>

</ASPP:PopupPanel>

bạn có thể thêm bất cứ control hay button nào tùy vào mục đích của bạn nhé, và nhớ design sao cho đẹp chút nữa.

Code behind

Để hiện Popup bạn sử dụng đoạn code sau

protected void Button1_Click(object sender, EventArgs e)
{
    pup.ShowPopupWindow();
}

protected void Button1_Click(object sender, EventArgs e)

{

pup.ShowPopupWindow();

}

Và để tắt Popup ta sử dụng code sau

protected void Button2_Click(object sender, EventArgs e)
{
    pup.HidePopupWindow();
}

protected void Button2_Click(object sender, EventArgs e)

{

pup.HidePopupWindow();

}

Download code

Nếu bạn nào còn không hiểu thì có thể download demo bên dưới về để tham khảo chi tiết hơn cách viết nhé

Demo

Lập trình

Code design

Code behind

Download code

Share this:

Like this:

Có liên quan

Nguyễn Trung Hiếu