Black Screen Modal Pop-up bootstrap in asp.net - asp.net

Question

I'm working on asp.net with bootstrap design.
I had implemented the modal pop-up on button click.
Unfortunately I'm facing the grey color over my pop-up and without any functionality working. If I click any where the modal pop-up is closing bu the grey color is always appearing until I do refresh.
My code :
<div class="table-responsive">
<table id="Table1" class="table">
<thead>
<tr>
<th>Type</th>
<th>Price</th>
<th>View</th>
<th>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal">Take Appointment</button>
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
Modal pop-up :
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Appointment Details</h4>
</div>
<div class="modal-body">
<div class="row text-center">
<div class="col-sm-3 col-xs-3">
<div class="form-group">
<label class="control-label">Type Name:</label>
</div>
</div>
<div class="col-sm-6 col-xs-6">
<div class="input-group">
<asp:TextBox ID="txtName" runat="server" placeholder="Enter Type Name" class="form-control"></asp:TextBox>
</div>
</div>
</div>
<div class="row text-center">
<div class="col-sm-3 col-xs-3">
<div class="form-group">
<label class="control-label">Price:</label>
</div>
</div>
<div class="col-sm-6 col-xs-6">
<div class="input-group">
<asp:TextBox ID="TextBox1" runat="server" placeholder="Enter Price" class="form-control"></asp:TextBox>
</div>
</div>
<div class="col-sm-3 col-xs-3">
</div>
</div>
<div class="input-group col-md-12 input-append" data-date-format="dd/mm/yyyy" id="divDateOfBirth">
<input class="date-picker form-control Datevalidate hasDatepicker" data-val="true" data-val-regex="Please enter valid value" data-val-regex-pattern="^(?:(?:31(\/)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(\/)(?:0?[1,3-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/)0?2\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/)(?:(?:0?[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)?\d{4})$" data-val-required="Please enter valid value" id="txtRESIDENT_SINCE" maxlength="10" name="RESIDENT_SINCE" onkeypress="return isDate(event)" placeholder="dd/mm/yyyy" type="text" value="" autocomplete="off">
<!--<input id="date-picker-2" type="text" class="date-picker form-control">-->
<span class="input-group-addon">
<span class="glyphicon glyphicon-remove" id="residentHideCal" onclick="clearCal(this)"></span>
</span><span id="SpanDob1" class="input-group-addon showdp">
<span class="glyphicon glyphicon-calendar" id="residentShowCal" onclick="showCal(this)"></span>
</span>
</div>
<div class="clockpicker">
<div class="input-group clockpicker">
<input type="text" class="form-control" value="09:30">
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
<script type="text/javascript">
$('.clockpicker').clockpicker();
</script>
</div>
</div>
<div class="modal-footer">
<button runat="server" class="btn btn-primary btn-sm" data-dismiss="modal">Submit</button>
<button type="button" class="btn btn-default btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
My current result :