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
1 2 3 | <%@ 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <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> |
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
1 2 3 4 | protected void Button1_Click(object sender, EventArgs e) { pup.ShowPopupWindow(); } |
Và để tắt Popup ta sử dụng code sau
1 2 3 4 | 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é
You must log in to post a comment.