I am trying to show a modal by calling a JS file function.
<div onclick="UsernameModal.showModal()" style="font-family: 'irsans-medium'; margin-right: 10px;color: #343CF9">some text</div>
The JS file and the function look as the following.
var UsernameModal = UsernameModal || {};
$(document).ready(function () {
UsernameModal.showModal = function () {
console.log("hi");
$('#usernameModal').modal({
backdrop: 'static',
keyboard: false
});
$('#usernameModal').modal('show');
}
.
.
.
}
The log method in the function gets invoked and also the JQuery is working as it goes into the $ sign. And no errors gets shown in the console after executing.
My _Layout.cshtml file is as below.
.
.
.
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/js/bootstrap.js"></script>
<script src="~/js/common.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js">
</script>
<script src="~/js/login.js"></script>
</head>
<body>
@RenderBody()
@RenderSection("scripts", required: false)
</body>
</html>
I do not know why the modal show function does not get executed. And the modal is located as below.
<div class="modal fade" id="usernameModal" tabindex="-1" role="dialog" aria-labelledby="usernameModal" aria-hidden="true">
<div class="modal-dialog center-modal">
<div class="modal-content">
<div class="modal-body">
@await Html.PartialAsync("../../Views/Password/_UsernameModal", new InputModel())
</div>
</div>
</div>
</div>
First, aria-labelledby="usernameModal" needed to be aria-labelledby="usernameModalLabel".
Second, instead of calling twice modal, once with the show argument , then again with some options setup, you can put them all together.
$('#usernameModal').modal({
backdrop: 'static',
keyboard: false,
show: true
});
Third, the order of the loaded css and script matters. The bootstrap css should go first, then the jQuery library, then the popper library (if applicable), finally the bootstrap library.
Fourth, you must be sure all DOM have being loaded prior trying to use them. You can use the jquery's ready, such as:
$(function() {
// Code that will be run after all DOMs in the page are loaded
});
Below is a working example:
$(function() {
$('#btnShowModal').bind('click', () => {
console.log("show modal");
$('#usernameModal').modal({
backdrop: 'static',
keyboard: false,
show: true
});
});
});<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js"></script>
<button id="btnShowModal">Show Modal</button>
<div class="modal fade" id="usernameModal" tabindex="-1" aria-labelledby="usernameModalLabel" aria-hidden="true">
<div class="modal-dialog">
<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">
@await Html.PartialAsync("../../Views/Password/_UsernameModal", new InputModel())
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>I hope this helped you out.
I corrected the order by which the file references where held in my _Layout.cshtml class.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
<title>something</title>
<link href="~/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/css/bootstrap-theme.min.css" rel="stylesheet" />
<link rel="icon" type="image/x-icon" href="~/favicon.ico" />
<link rel="shortcut icon" type="image/x-icon" href="~/favicon.ico" />
<link rel="stylesheet" type="text/css" href="~/css/site.css" />
<link rel="stylesheet" href="~/css/login.css"/>
<link rel="stylesheet" href="~/css/common.css" />
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/js/bootstrap.min.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
<script src="~/js/common.js"></script>
<script src="~/js/login.js"></script>
</head>
<body>
@RenderBody()
@RenderSection("scripts", required: false)
</body>
</html>