I have a bootstrap view which I am trying to get a modal working for. Unfortunately the modal is displaying as part of the page, not invisable. So it is displaying with it's content as part of the page. Here is my code:
<!-- Placing excel upload modal here... -->
@using (Html.BeginForm("UploadExcel", "Home", FormMethod.Post, new { enctype = "multipart/form-data", @class = "form-horizontal" })) {
<div class="modal fade" id="excelModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Excel Upload</h4>
</div>
<div class="modal-body">
<p>Please upload an excel file that contains the data you are wishing to include in the report parameters.</p>
</div>
<div class="modal-footer">
<div>
<div class="form-group">
@Html.Label("Excel File:", new { @class = "control-label col-md-2" })
<div class="col-md-10">
<input id="excelFile"
name="excelFile"
type="file" />
<button class="btn btn-primary"
type="button"
ng-click="ExcelUpload()">
Submit
</button>
</div>
</div>
</div>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
}
I Just added some panneling, but was wondering if you could find any issues with it. Thanks.