Hallo,
ich habe Probleme mit einem Modal-Fenster. Ich nutze Bootstrap und das Modal wird auch vom CSS-Style korrekt angezeigt. Was nicht funktionier, sind die Events Schliessen über das data-dismiss="modal". Das Modal erscheint zwar beim Aufruf der HTML-Seite, kann aber nicht geschlossen werden.
Liegt das am JavaScript oder daran, dass weitere js-Dateien inkludiert sind?
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="assets/img/favicon.ico">
<title>Template</title>
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Besondere Stile für diese Vorlage -->
<link href="dist/css/sticky-footer-navbar.css" rel="stylesheet">
<link href="dist/css/bootstrap.additional.css" rel="stylesheet">
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="assets/js/ie-emulation-modes-warning.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myModal").modal('show');
});
</script>
</head>
<body>
<!-- Fixierte Navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#navbar" aria-expanded=
"true" aria-controls="navbar"><span class=
"sr-only">Navigation ein-/ausblenden</span>
<!-- Dieser Bereich wird mit "tidy -i" gelöscht! - Anfang-->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<!-- Dieser Bereich wird mit "tidy -i" gelöscht! - Ende-->
</button>
<a class="navbar-brand" href="index.html"><img class=
"img-responsive navbar-brand" src="assets/img/logonew.png"
alt="aa"></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">
<a href="index.html">HOME</a>
</li>
<li>
<a href="about.html">ÜBER</a>
</li>
<li class="dropdown">
<a href="braids.html" class="dropdown-toggle"
data-toggle="dropdown" role="button" aria-haspopup=
"true" aria-expanded="false">AFRO STYLES</a>
<ul class="dropdown-menu">
<li>
<a href="cornrows.html">CORNROWS</a>
</li>
<li>
<a href="braids.html">BRAIDS</a>
</li>
<li>
<a href="crochetbraids.html">CROCHET
BREADS</a>
</li>
<li>
<a href="dreadlooks.html">DREADLOOKS</a>
</li>
<li>
<a href="weavons.html">WEAVONS</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="extensions.html" class=
"dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false">PRODUKTE</a>
<ul class="dropdown-menu">
<li>
<a href="extensions.html#curls">CURLS EXTENSIONS</a>
</li>
<li>
<a href="extensions.html#wavys">WAVY EXTENSIONS</a>
</li>
<li>
<a href="extensions.html#straights">STRAIGHT EXTENSIONS</a>
</li>
<li>
<a href="wigs.html">PERÜCKEN</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="services.html" class=
"dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false">SERVICES</a>
<ul class="dropdown-menu">
<li>
<a href="services.html#straightperms">STRAIGHT PERMS</a>
</li>
<li>
<a href="services.html#curlperms">CURLY PERMS</a>
</li>
<li>
<a href="services.html#eyelash">EYELASH EXTENSIONS</a>
</li>
</ul>
</li>
<li>
<a href="haircare.html">HAARPFLEGE</a>
</li>
<li class="dropdown">
<a href="imprint.html" class=
"dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded=
"false">IMPRESSUM</a>
<ul class="dropdown-menu">
<li>
<a href="imprint.html">IMPRESSUM</a>
</li>
<li>
<a href="dataprotection.html">DATENSCHUTZ</a>
</li>
<li>
<a href="approach.html">ANFAHRT</a>
</li>
<li>
<a href="contact.html">KONTAKT</a>
</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav><!-- Seiteninhalt -->
<div class="container">
<div class="page-header">
<h1>Überschrift</h1>
</div>
<!-- Modal Begin -->
<div id="myModal" class="modal fade in" style=
"display: block; padding-right: 16px;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Aktuelle
Information</h4><button type="button" class="close"
data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<h4><font color="#FF0000">Mittlerweile befinden wir uns
in der<br>
Leimener Straße 68!</font></h4>
<p>Wir sind mit den Stadtbahnen U2 und U4 direkt am
oberen Ausgang der U-Haltstelle in der
Unterführung erreichbar.</p>
<p class="text-secondary"><small><font color=
"#FF0000">Der neue Laden befindet sich 140 m die
Weberstraße in Richtung U-Bahn-Säule aufwärts vom alten
Laden entfernt.</font></small></p>
</div>
<div class="modal-footer">
<a class="btn btn-info" href="approach.html" role="button">Jetzt mehr erfahren</a>
<button type="button" class="btn btn-default" data-dismiss="modal">oder schliessen</button>
</div>
</div>
</div>
</div>
<!-- Modal End -->
<div class="row">
<div class="col-md-4">
</div>
</div>
</div><!-- Footer -->
<footer class="footer">
<div class="container">
<p class="text-muted"></p>
<ul class="nav navbar-nav flex-row">
<li class="nav-item ml-xl-n4">
<p class="p-muted">2020 Afroshop. All Rights
Reserved.</p>
</li>
</ul>
</div>
</footer><!-- Bootstrap-JavaScript
================================================== -->
<!-- Am Ende des Dokuments platziert, damit Seiten schneller laden -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
<!-- IE10-Anzeigefenster-Hack für Fehler auf Surface und Desktop-Windows-8 -->
<script src="assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
Alles anzeigen
Vielen Dank für Eure Hinweise,
BrotherJ
