0
Я учусь сделать основной модальный, который отображается по щелчку ссылки. Может ли кто-нибудь объяснить мне, почему приведенный ниже код не работает? При нажатии ничего не происходит.(bootstrap) modal не показывает
Кроме того, мне всегда нужно включать bootstrap CSS в голову? Я замечаю, что когда он не включен, модальность не скрыта. Но если я включаю его, он перезаписывает мою веб-страницу CSS.
Вот скрипка ссылка: https://fiddle.jshell.net/skLjx4cy/#&togetherjs=M9bR7EHJAE
И код:
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
function loadModal() {
$('#settingsModal').modal('show');
}
</script>
</head>
<body>
<div style="margin-left:10px; margin-top:10px;" id="setting_websearch">
<a href="" onclick="loadModal()">Web search settings</a><br>
<div style="margin-left: 25px; margin-top: 10px; font-size:small;">Advanced
users only. </div>
</div>
<div id="log"></div>
<div class="modal fade" id="settingsModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>