Hallo zusamen,
ich nutze noch Bootstrap 3.1 auf einem Typo3-CMS. 4 will ich derzeit nicht einsetzen, da ich nicht der tägliche Webentwickler bin. In meinem Design liegen die Menüs nach unten aufklappbar oberhalb des Inhaltes (2 Spalten). Dazu verwende ich im Code folgende JS-Dateien
<script src="/typo3conf/ext/project1/Resources/Public/JavaScript/jquery-3.3.1.min.js?1516469204" type="text/javascript"></script>
<script src="/typo3conf/ext/project1/Resources/Public/JavaScript/bootstrap.min.js?1469462882" type="text/javascript"></script>
<script src="/typo3conf/ext/project1/Resources/Public/JavaScript/jquery.smartmenus.js?1505651220" type="text/javascript"></script>
<script src="/typo3conf/ext/project1/Resources/Public/bootstrap/addons/bootstrap/jquery.smartmenus.bootstrap.js?1505651220" type="text/javascript"></script>Folgender Code dient mir zum Testen des Modals, das ich in die Websites einbinden will:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta name="generator" content="Bluefish 2.2.9" >
<meta name="date" content="2019-03-31T19:01:33+0200" >
<meta name="copyright" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="expires" content="0">
<link rel="stylesheet" type="text/css" href="popup.css" media="all">
</head>
<body><br><br><br><br>
<h1>Testseite</h1>
<br><br><br><br><br>
<h4>Titeltext</h4>
<!--------- HTML-Code for Desktop-View ---------->
<div id="popup" class="einblenden">
<div id="close">X</div>
<h2>Persönliche Beratung und Support?</h2>
<div class="hintergrund">
<p>Wir unterstützen Sie gerne bei DNS und Nameserver und bieten umfassende Beratung.</p>
<a class="button-popup" href="https://www.example.com/nameserver-support.html" target="blanc">Neugierig geworden?</a>
</div>
</div>
<script>
<!--
$(document).ready(function(){
$("#close").click(function(){
$("#popup").fadeOut();
});
});
-->
</script>
<!--------- HTML-Code for Mobile-View ---------->
<div id="popup-mobile" class="einblenden">
<div id="close-mobile">X</div>
<h2>Persönliche Beratung und Support?</h2>
<p>Wir unterstützen Sie gerne bei DNS und Nameserver und bieten umfassende Beratung.</p>
<a class="button-popup" href="https://www.example.com/nameserver-support.html" target="blanc">Neugierig geworden?</a>
</div>
<script>
<!--
$(document).ready(function(){
$("#close-mobile").click(function(){
$("#popup-mobile").fadeOut();
});
});
-->
</script>
<script src="jquery-3.3.1.min.js"></script>
<script src="bootstrap.min.js" type="text/javascript"></script>
<script src="jquery.smartmenus.js" type="text/javascript"></script>
<script src="jquery.smartmenus.bootstrap.js" type="text/javascript"></script>
</body>
</html>Das Modal erscheint nach Seitenaufruf zeitversetzt wie gewünscht. Nur schliessen lässt es sich nicht. Es lässt sich nur schliessen, wenn die JS-Dateien für die Menü-Darstellung nicht einhalten sind.
Was kann ich jetzt wie machen, dass beides funktioniert? Muss ich die bootstrap.min.js, jquery.smartmenus.js, jquery.smartmenus.bootstrap.js irgendwie anpassen? Oder gibt eine Möglichkeit das Modal auch ohne JQuery zu schließen?
Vielen Dank
Diani