Ich lerne, um ein grundlegendes Modal zu machen, das auf Klicken eines Links zeigt. Kann mir jemand erklären, warum der folgende Code nicht funktioniert? Beim Klicken passiert nichts.(bootstrap) modal zeigt nicht
Muss ich auch immer Bootstrap CSS in den Kopf aufnehmen? Ich stelle fest, dass das Modal nicht versteckt ist, wenn es nicht enthalten ist. Aber wenn ich es einschließe, überschreibt es meine Webseite CSS. Hier
ist die Geige Link: https://fiddle.jshell.net/skLjx4cy/#&togetherjs=M9bR7EHJAE
Und Code:
<!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>