Hi sir,
I have created ASp.net Webform with modal popup window. when button is clicken, the modal popup will open,but it is not movable. I want the modal popup window to be dragged across the page.
Here is my sample code. Please anyone help me, how to do this with my code given below?
The modal popup is given with server side click event.
Thanks,
Dhivya
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Drawing;
using System.Data.SqlClient;
using System.IO;
using System.Configuration;
using System.Text;
using System.Text.RegularExpressions;
using System.Web.Services;
using System.ComponentModel;
public partial class testmodal : System.Web.UI.Page
{
DBFunctions db = new DBFunctions();
DataSet ds = new DataSet();
private static int PageSize = 100;
//protected LinkButton[] lbPage;
string SearchString = "";
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Nav_Lb_Add_Click(object sender, EventArgs e)
{
ClientScript.RegisterStartupScript(this.GetType(), "alert", "ShowPopup_card();", true);
this.lblMessage.Text = "Please select the Card to Add Record";
ddl_CardSelection.SelectedValue = "SELECT Card";
lblmsgcard.Visible = false;
}
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<style>
.modal-header, h4, .close {
background-color: #5cb85c;
color:white !important;
text-align: center;
font-size: 30px;
}
.modal-footer {
background-color: #f9f9f9;
}
</style>
<script type="text/javascript">
function ShowPopup_card() {
$("#btnShowPopup").click();
}
</script>
</head>
<form id="form1" runat="server">
<body>
<li><asp:LinkButton ID="Nav_Lb_Add" runat="server" OnClick="Nav_Lb_Add_Click">Add CardRecord</asp:LinkButton></li>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title">
Card Selection</h4>
</div>
<div class="modal-body" style="text-align:center">
<asp:Label ID="lblMessage" runat="server" />
<asp:Panel ID="PL_CardSelect" runat="server">
<asp:DropDownList ID="ddl_CardSelection" runat="server" OnSelectedIndexChanged="ddl_CardSelection_SelectedIndexChanged">
<asp:ListItem>SELECT Card</asp:ListItem>
<asp:ListItem>Sequential</asp:ListItem>
<asp:ListItem>Random</asp:ListItem>
</asp:DropDownList><br />
<asp:Label runat="server" ID="lblmsgcard"></asp:Label>
</asp:Panel>
</div>
<div class="modal-footer">
<asp:Button runat="server" ID="Button1" class="btn btn-default" Text="Close" UseSubmitBehavior="false">
</asp:Button>
<asp:Button runat="server" class="btn btn-primary" ID="Btn_CardSelection" Text="Submit" OnClick="Btn_CardSelection_Click1" UseSubmitBehavior="false" />
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</asp:Panel>
<%-- Hidden Button for Card Selection --%>
<button type="button" style="display: none;" id="btnShowPopup" class="btn btn-primary btn-lg"
data-toggle="modal" data-target="#myModal">
Launch demo modal</button>
<!-- /.modal -->
</form>
</body>
</html>
