I am working with ASP.NET MVC 5 on a project that requires a modal window to register a new user, the code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inicio de sesión</title>
<link href="~/Content/bootstrap-theme.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/jquery-2.2.1.min.js"></script>
</head>
<body>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form role="form">
<div class="modal-header">
<h2>Registro de usuarion</h2>
</div>
<br />
<div class="form-group">
<label class="labels"><span class="glyphicon glyphicon-user"></span> Nombre de usuario:</label>
<input class="form-control" type="text">
</div>
<div class="form-group">
<label class="labels"><span class="glyphicon glyphicon-eye-open"></span> Contraseña:</label>
<input class="form-control" type="password">
</div>
<br />
<a href="#" class="btn" id="Registrar"><span class="glyphicon glyphicon-ok"></span> Registrar</a>
<div class="modal-footer">
</div>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$("#myModal").modal({
backdrop: 'static',
});
});
</script>
But when I run it, nothing appears, the modal window is supposed to be displayed without the need to use a button, but the jQuery function that does it does not seem to work. What do I need to add?
Load Jquery before Bootstrap's JS file.
You can try this alternative using
dialog
.Reference
check the id of your modal well
check that jquery.js is working correctly