Friends today I am going to show how you can convert a Div
tag to popup and message using it from code behind I am
going to show how you can get confirmation from user and proceed based on their
output .just follow this simple steps
Step 1 Create Div
<div class="custompopup"
id="divThankYou"
runat="server">
<p>
<asp:Label ID="lblmessage"
runat="server"></asp:Label>
</p>
<asp:Button ID="Button2"
CssClass="classname
leftpadding" runat="server" Text="Ok" OnClick="Button2_Click1" />
</div>
Step 2 Styling
Now create a css for your popup .(below is example how you
can create one)
.custompopup
{
background-color: #fff;
border: 3px solid #fff;
display: inline-block;
left: 50%;
padding: 15px;
position: fixed;
text-align: justify;
top: 40%;
z-index: 10;
-webkit-transform: translate(-50%,
-50%);
-moz-transform: translate(-50%,
-50%);
-ms-transform: translate(-50%,
-50%);
-o-transform: translate(-50%,
-50%);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
-webkit-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4)
inset;
-moz-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4)
inset;
-ms-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4)
inset;
-o-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4)
inset;
-webkit-transition: opacity
.5s, top .5s;
-moz-transition: opacity
.5s, top .5s;
-ms-transition: opacity
.5s, top .5s;
-o-transition: opacity
.5s, top .5s;
}
.custompopup p, .custompopup div
{
margin-bottom: 10px;
}
.custompopup label
{
display: inline-block;
text-align: left;
width: 120px;
}
.custompopup input[type="text"],
.custompopup input[type="password"]
{
border: 1px solid;
border-color: #999 #ccc #ccc;
margin: 0;
padding: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
}
.custompopup input[type="text"]:hover,
.custompopup input[type="password"]:hover
{
border-color: #555 #888 #888;
}
Step 3 Page Load event
Now on code at page load
protected void Page_Load(object sender, EventArgs
e)
{
divThankYou.Visible = false;
}
Call this on button click now your div will like
popup
Step 4 Put a asp Button
<asp:Button ID="BtnDelete"
CssClass="classname
leftpadding" runat="server" Text="Delete" OnClick="BtnDelete_Click" />
Step 5 Call Div on this click
protected void
BtnDelete_Click(object sender, EventArgs e)
{
divdelete.Visible = true;
lblDelete.Text = "Are you sure want to
delete this ?";
}
Blow is link from where you can download complete code of
this demo Code
Comments
Post a Comment