This article will show you how you can create a drag able
modalpopupextender in asp.net using ajaxcontroltoolkit. In this we will open the popup message box and
drag it on screen by selecting it’s header.
Some of mprevious articles are as follows: CalendarExtender
Example With Custom Style By Css Uaing Asp.net and Css, AjaxControlToolkit
CalendarExtender to Display Calendar in Asp.net on Textbox Click, Execute
Or Open ModalPopupExtender as MessageBox From Code Behind Using C#.Net In
Asp.Net, Display
Validation in ToolTip Using ValidatorCalloutExtender in Asp.Net, AjaxControlToolkit
ModalPopupExtender With AutoCompleteExtender In Asp.Net Using C#.Net,
GridView
With Autocomplete Textbox Using AutoCompleteExtender in Asp.net Using C#.Net,
TextBoxWatermark
Contol Of AjaxControlToolKit For Displaying Watermark in TextBox In Asp.Net,
How
to Dynamically Add Ajaxcontroltoolkit Accordion Menu AccordionPane in Asp.Net
Using C#.
So for this article first we will create a new asp.net
application and add the below code in you .aspx page.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm4.aspx.cs" Inherits="WebApplication1.WebForm4"
%>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"
TagPrefix="asp"
%>
<!DOCTYPE html
PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Dragable
ModalPopupExtender In Asp.Net Using AjaxControlToolkit</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
TargetControlID="btnShowMessage"
PopupControlID="divMessage" CancelControlID="btnClose" PopupDragHandleControlID="divheader">
</asp:ModalPopupExtender>
<table width="100%">
<tr>
<td>
<asp:Button ID="btnShowMessage" runat="server" Text="Open Popup"
/>
</td>
</tr>
</table>
<div runat="server" style="width: 300px;" id="divMessage">
<table width="300px" border="1">
<tr>
<td>
<div style="background-color: Gray; height: 20px; font-weight: bold;"
id="divheader">
Message</div>
<div style="height: 100px;">
This is a test
message.</div>
</td>
</tr>
<tr>
<td>
<asp:Button ID="btnClose"
runat="server"
Text="Close"
/>
</td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>
|
In above code please check the ModalPopupExtender
properties
1.
TargetControlI
: This is defined for the control id to open the popup when user click on the
control.
2.
PopupControlID
: This the is the property which will
open the popup.
3.
CancelControlID
: This is for closing the popup
4.
PopupDragHandleControlID
: In this we will define the control id by using that control we will drage the
popup.
So we have done run the application and check the output.
About the Author
Hi, firstly thanks for the post, maybe the publication has a lot of time, but currently I do not find solution for my problem, I want the modal or the window does not block the mouse events in the background of the web, that is, being able to have the window modal but also to be able to click on the controls of the page that contains the modal window, I would appreciate your help.
ReplyDeletePlis Notify me
ReplyDelete