I am trying to create bootstrap like popup using my ajax modelpopup exteder in asp.net
I have tried so far as below.. Please help me to make this popup much better ..
There are few isssues with this , height , width , look and feels are not proper .
and every time if i want to add contents in my popup bidy i have to adjust heights and width
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="AddStateView.ascx.cs" Inherits="DreamTouchWebUI.controls.AddStateView" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
<style type="text/css">
.modal-header {
background-color: #f0f0f0;
}
.modal-footer {
background-color: #f0f0f0;
}
.form-control1, .form-control_2.input-sm {
width: 35%;
}
.col-sm-8 {
width: 35%;
}
.input-group {
margin: 0 0 0 13em;
}
.form-control1, .form-control_2.input-sm {
-moz-appearance: meterchunk;
height: 30px;
width: 158px;
}
tr {
max-height: 35px !important;
height: 35px !important;
overflow: hidden;
}
.btn-info {
padding: 2px 10px;
}
.table td, .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
padding: 5px !important;
width: 10px;
}
.modalBackground {
background-color: Black;
filter: alpha(opacity=90);
opacity: 0.8;
}
.modal-dialog {
margin: -41px auto;
}
.modal-body {
padding: 29px;
position: relative;
}
</style>
<div class="xs tabls">
<div class="bs-example4" data-example-id="contextual-table">
<div style="margin-bottom: 11px" class="row">
<div class="col-md-2">
<asp:Button ID="btnCreateState" runat="server" Text="Create State" CssClass="btn btn-sm btn-info" />
</div>
</div>
<div class="table-responsive">
<asp:Repeater ID="rptState" runat="server">
<HeaderTemplate>
<table class="table table-bordered">
<thead>
<tr>
<th style="width: auto">#</th>
<th>Sr.No</th>
<th>State Name</th>
</tr>
</thead>
</HeaderTemplate>
<ItemTemplate>
<tbody>
<tr>
<th scope="row"></th>
<td><%#Container.ItemIndex+1 %></td>
<td><%#Eval("Name") %></td>
</tr>
</tbody>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</div>
</div>
</div>
<!-- ModalPopupExtender -->
<ajax:ModalPopupExtender ID="mp1" runat="server" PopupControlID="Panel1" TargetControlID="btnCreateState"
CancelControlID="btnClose" BackgroundCssClass="modalBackground">
</ajax:ModalPopupExtender>
<asp:Panel ID="Panel1" runat="server" CssClass="modal-dialog" align="center" Style="display: none;width:600px;">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="exampleModalLabel">Create State</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="smallinput" class="col-sm-2 control-label label-input-sm">State</label>
<div class="col-sm-8">
<asp:TextBox CssClass="form-control1 input-sm" ID="txtState" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="rqeState" runat="server" ControlToValidate="txtState" ErrorMessage="*" ValidationGroup="SaveState"></asp:RequiredFieldValidator>
</div>
</div>
</div>
<div class="modal-footer">
<asp:Button Style="float: left" ID="btnSave" ValidationGroup="SaveState" runat="server" Text="Save" class="btn btn-primary" OnClick="btnSave_Click" UseSubmitBehavior="false" data-dismiss="modal" />
<asp:Button Style="float: left" ID="btnClose" class="btn btn-primary" runat="server" Text="Close" />
</div>
</div>
</asp:Panel>
<!-- ModalPopupExtender -->