After successfully loading external content into my bootstrap-modal, I noticed that each time the modal page is called, an extra instance is created. You can see an example of this in the following screenshot: user (). How can I troubleshoot this issue? I suspect it may be related to the CSS, but I am not certain of the exact source.
Below is the code for my views:
<div id="responsive" class="modal fade" tabindex="-1" data-width="760" style="display: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Info</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
@*<button type="button" class="btn btn-primary">Save changes</button>*@
</div>
Click me!
And here is the code for the target modal:
<div class="modal-body">
<dl class="dl-horizontal">
<dt>
@Html.DisplayName("User Name")
</dt>
<dd>
@ViewBag.username
</dd>
<dt>
@Html.DisplayNameFor(model => model.Name_Prefix)
</dt>
<dd>
@Html.DisplayFor(model => model.Name_Prefix) .
</dd>
</dl>
<p>
@*@Html.ActionLink("Edit", "Edit", new { id = Model.CustomerId }) |*@
<button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
</p>