I am using Zurb Foundation 6 framework and I want to use the reveal modal. For some reason there is no response when clicking the button to open the modal.
My JsFiddle
https://jsfiddle.net/zzf2suto/1/
Your jquery script url is wrong, also close button in reveal has different syntax
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css">
</head>
<body>
Click Me For A Modal
<div id="myModal" class="reveal" data-reveal>
<h2>Awesome. I have it.</h2>
<p class="lead">Your couch. It is mine.</p>
<p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
<button class="close-button" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/vendor/what-input.min.js"></script>
<script>$(document).foundation();</script>
</body>
</html>
Correct reveal modal syntax
Related
Actually I am trying to get this code to run under bootstrap 5.0.0 alpha, with tthe example given in the bootstrap 5 documentation. As it didn't work I tried it with the current bootstrap 4 version, and one of the examples in the bootstrap 4 documentation. Both times I am hitting the same error message:
Uncaught TypeError: myModal.show is not a function at window.onload (cookieModal.php:180)
I put the example from the boostrap 4 site in a basic bootstrap code and added the script with the window.onload function to trigger the modal after the site has been loaded:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Bootstrap 4 Starter Template</title>
</head>
<body>
<h1>Hello</h1>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script type="text/javascript">
window.onload = function(){
var myModal = document.getElementById('exampleModal');
myModal.show();
}
</script>
</body>
</html>
The error is the same in Bootstrap 5 alpha as in Bootstrap 4. In both cases when you press the button at least the modal appears.
As boosttrap 5 has abandonned jQuery I am not interested in a jQuery solution. I would prefer to launch the modal with window.onload.
I had inserted an alert after the var myModal declaration and it shows that myModal is a DIV element. So at least myModal seems to find the id for exampleModal.
Thank you in advance
Gunther
After another week of googling I found the answer in Bootstrap V5 manually call a modal myModal.show() not working (vanilla javascript)
window.onload = function(){
var myModal = new bootstrap.Modal(document.getElementById('exampleModal'));
myModal.show();
}
works !!!
I am using the standard example for off canvas navigation in foundation like this...
<body>
<div class="off-canvas position-left" id="offCanvas" data-off-canvas>
<!-- Close button -->
<button class="close-button" aria-label="Close menu" type="button" data-close>
<span aria-hidden="true">×</span>
</button>
<!-- Menu -->
<ul class="vertical menu">
<li>Foundation</li>
<li>Dot</li>
<li>ZURB</li>
<li>Com</li>
<li>Slash</li>
<li>Sites</li>
</ul>
</div>
<div class="off-canvas-content" data-off-canvas-content>
<!-- Your page content lives here -->
</div>
</body>
I am looking for a way to trigger a jquery CSS function after the animation has finished.
I have this so far..
$( document ).on( "close.offcanvas", function( e ){
//$('.pagination').css('display','block');
});
But this triggers when the open button is clicked, does anybody know if the are any callbacks or similar that I can use so that the CSS is applied only after the off canvas animation has finished?
Foundation includes an 'opened' and 'closed' event for this purpose: https://foundation.zurb.com/sites/docs/off-canvas.html#js-events
In the code example below I output a message to the console when the menu is closed.
$(document).foundation()
$('#offCanvas').on('closed.zf.offcanvas', function(event) {
//$('.pagination').css('display','block');
console.log("Off-canvas menu was closed.")
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/js/foundation.min.js"></script>
<div class="off-canvas position-left" id="offCanvas" data-off-canvas>
<!-- Menu -->
<ul class="vertical menu">
<li>Foundation</li>
<li>Dot</li>
<li>ZURB</li>
<li>Com</li>
<li>Slash</li>
<li>Sites</li>
</ul>
<!-- Close button -->
<button class="close-button" aria-label="Close menu" type="button" data-close>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="off-canvas-content" data-off-canvas-content>
<!-- Your page content lives here -->
<button type="button" class="button" data-toggle="offCanvas">Open off-canvas</button>
</div>
Please anyone can help me, How can animate css styles can be use to animate while bootstrap modal opens and closes?
As Modal Opens it should be open with fadeIn effect and while closing it should with fadeOut effect.
I wanted to use animate.css css stylesheet for animate modal poup open and close.
It should add class fadeIn while opening Model and while closing the modal it should be adding class fadeOut. ( Class .fadeIn & .fadeOut are from aniamte.css stylesheet)
$('.modal').on('show.bs.modal', function (e) {
$('.modal .modal-dialog').attr('class', 'modal-dialog fadeIn animated');
})
$('.modal').on('hide.bs.modal', function (e) {
$('.modal .modal-dialog').attr('class', 'modal-dialog fadeOut animated');
})
This is I wanted.
Add fade to class attribute of your modal markup:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal with animation</h4>
</div>
<div class="modal-body">
Close modal to see <i>fade-out</i> effect.
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal with <i>fade-in</i> effect
</button>
Remove the .fade class from your modal markup to simply appear one. See Remove animation section for details.
$('#modelDivId').on('show.bs.modal', function (e) {
$('.modal .modal-dialog').attr('class', 'modal-dialog flipInX animated');
})
$('#modelDivId').on('hide.bs.modal', function (e) {
$('.modal .modal-dialog').attr('class', 'modal-dialog flipOutX animated');
})
i'm trying out BootStrap in Djangocms 3.0, and can't get it to work. i created a simple html (code below), which is a composite of a banner from this tutorial, and a simple modal from here. i'm call it through a django view.
when i go to the page, what i see depends on what browser i use. in chrome, i see a black banner and the Bootstrap link, and nothing else (not Home, About, etc.., nor the modal). in IE and Mozilla i see the whole banner, but no modal.
if i comment out the references to the bootstrap css and js files, then everything (all the links and the modal contents) appear, but without any styling, of course. so it seems that i have the {{ STATIC_URL }} correct. it is recognizing the classes, just not displaying them correctly (or at all)?
any ideas? thanks!!
<html>
<head>
<link href="{{STATIC_URL}}css/bootstrap.css" rel="stylesheet">
<link href="{{STATIC_URL}}css/bootstrap-responsive.css" rel="stylesheet">
<script src="{{STATIC_URL}}js/bootstrap.js" type="text/javascript"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="/">Bootstrap</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
UPDATE:
i reinstalled djangocms, rebuilt my entire site, and re-populated my DB, and now things display properly in the above example. i can even get a modal dialog to pop up and sort of function. however, it works funny. for example, sometimes, the close button works, and sometimes it doesnt. most of the time, everything on the page after the modal element is unresponsive, though not always. i know this is very vague, but the problems are all over the place, so its hard to describe accurately in less than a book. i feel its a conflict of some sort with django, but besides the imported bootstrap files, i have only two js functions of my own, and very little css at this point.
has anyone had similar problems implementing bootstrap in Djano.
try to save all you static file under :
app_name/static/app_name/
in your html code add:
{% load staticfiles %}
<link href="{% static 'app_name/css/bootstrap.min.css' %}" rel="stylesheet">
and check for static filemore information
I am trying to use zurb foundation 5 reveal modal. But it's not working and not open when I click on button.
I am using this html code.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link type="text/css" rel="stylesheet" href="css/foundation.css" />
<link type="text/css" rel="stylesheet" href="css/normalize.css" />
<title>index</title>
</head>
<body>
<div id="myModal" class="reveal-modal" data-reveal>
<h2>Awesome. I have it.</h2>
<p class="lead">Your couch. It is mine.</p>
<p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
<a class="close-reveal-modal">×</a> </div>
<a class="button" href="#" data-reveal-id="myModal">Click for a modal</a>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.reveal.js"></script>
<script type="text/javascript">
$('#myModal').foundation();
</script>
</body>
</html>
Change the last script tag to this:
<script type="text/javascript">
$(document).foundation();
</script>
You also forgot to add the modal trigger:
Click Me For A Modal
See documentation here: http://foundation.zurb.com/docs/components/reveal.html
You may be running into this issue if you have called $(document).foundation(); twice on the same page.
Its works for me
Click Me For A Modal
<div id="myModal" class="reveal-modal" data-options="close_on_background_click:false" data-reveal>
<h2>Awesome. I have it.</h2>
<p class="lead">Your couch. It is mine.</p>
<p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
<a class="close-reveal-modal">×</a>
</div>
in footer i used this snippet
<script>
jQuery(document).ready(function(){
jQuery(document).foundation();
jQuery('#dd').click(function(){
jQuery('#myModal').foundation('reveal', 'open');
});
});
</script>