As part of my shared layout, I'd like to have a modal dialog come up on a button click.
This is the my partial view with the modal dialog:
<ul class="nav navbar-nav navbar-right">
<li>
<button type="button" class="open-dialog btn" data-toggle="modal" data-target="#SettingsModal">Settings</button>
</li>
</ul>
<!-- Modal -->
<div class="modal fade" id="SettingsModal" tabindex="-1" role="dialog" aria-labelledby="SettingsModalLabel">
<div class="modal-dialog" role="document">
<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>
</div>
<div class="modal-body">
<p>Some text</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<a id="settings" class="btn btn-primary btn-sm" href="#">Save changes</a>
</div>
</div>
</div>
</div>
Script
<script type="text/javascript">
$(document).on("click", ".open-dialog", function() {
$('#settings').attr('href', $(this).data('url')); // update the link's url
});
</script>
And the partial view's controller:
public class SettingsController : Controller
{
public ActionResult _Settings()
{
return PartialView("_Settings");
}
}
What I'm going for, is to have a button at the top of the page as part of the shared _Layout. Similar to this:
When I click the 'Settings' button, a modal dialog is supposed to come up, but when I click it now, the screen just goes dark, and I can sort of hint the modal dialog in the background. I'm not sure where in the modal I've done something wrong. Any hint is appreciated!
Try this:
$('#settings').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
url = button.data('url');
$.post(url, function (data) {
$('.model-body').html(data);
});
});
Action method:
public PartialViewResult Settings()
{
if (Request.IsAjaxRequest())
{
// retrive your model
return PartialView("_Settings");
}
return null;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.