I've placed a button to activate a 'twitter bootstrap modal' on the 3rd tab within a 'navtab'. When the modal button is clicked there is a short delay then the 1st tab of the navtab is set to active. At no point is the modal visible.
My assumption is that the modal defaults to the first tab and that when the tab changes from tab 3 to tab 1 an event is fired that causes the modal to close.
Which leads me to the question: how can I set the modal to activate on tab n rather than tab 1?
Am I completely wrong about what is happening here? Any help would be appreciated. Thank you
<button class="btn btn-primary" id="tester">Detailed</button>
<div class="modal fade bs-example-modal-sm" id="mymod" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
...
</div>
</div>
</div>
<script type="text/javascript">
$(document).on('click', '#tester', function(){
$("#mymod").modal('show');
});
</script>
My problem was that I didn't have the proper javascript library loaded for bootstrap.
Adding bootstrap-modal.js to my static assets solved my problem.
Related
I am investigating how to build an accessible dialog modal in React.
I saw few sources suggesting to place the modal at the end of the DOM tree as direct child of the
E.g: https://assortment.io/posts/accessible-modal-component-react-portals-part-1
(Look for the When rendered, the Modal is appended to the end of document.body.. section.)
My question is.. WHY? What benefit is this bringing?
If I am not wrong, some of these sources meant that in this way the screen reader would ignore the other children of the body, so save the user from focusing on not desired elements.
If this is the reason, is this the suggested and only way of doing it?
My idea was to simply "trap" the user inside the modal not allowing them to focus on anything else outside the modal.
My idea was that if the user is on the first or last element of of the modal and is trying to go back or forward they will still be focusing on the first or last element of the modal. That using JS.
So, going back to the main question, why should I place the modal as a direct child of the DOM? Thank you!
Not necessarily a direct descendant, you just need to separate the modal from other content
in order to hide all content when the modal is opened
Here is a detailed description of your situation:
http://web-accessibility.carnegiemuseums.org/code/dialogs/
<body>
<!-- Add aria-hidden="true" if there is at least one pop-up window (Modal) -->
<div class="page" aria-hidden="true">
...
</div>
<div class="dynamic-place">
<div hidden role="dialog" aria-describedby="" aria-labelledby=""></div>
<div hidden role="dialog" aria-describedby="" aria-labelledby=""></div>
<!-- Only one active modal per page: -->
<div role="dialog" aria-describedby="" aria-labelledby="">
Active modal
</div>
</div>
</body>
but you can also do the following:
to give all elements except the modal window aria-hidden=true, nobody forces you to wrap all content in a single block (as in the first example), this is just a suggestion that simplifies this task
<body>
<div aria-hidden="true">
...
</div>
<main aria-hidden="true">
...
</main>
<footer aria-hidden="true">
...
</footer>
<div class="dynamic-place">
<div hidden role="dialog" aria-describedby="" aria-labelledby=""></div>
<div hidden role="dialog" aria-describedby="" aria-labelledby=""></div>
<!-- Only one active modal (opened) per page: -->
<div role="dialog" aria-describedby="" aria-labelledby="">
Active modal
</div>
</div>
</body>
I am trying to create a form with two 'pages' using bootstrap modal,
when the user clicks "next" it suppose to hide the modal, load new content and show it again.
but when I close the modal with .modal("hide"), it doesn't close the modal but also shows another modal and make the screen even darker.
also when I click the close button that bootstrap gives us, it shows two modals and a second later hides them, and the second time i click to open the modal i have 3 modals!
whenever i click any button in the modal it adds another modal to the page.
what can i do??
here is some code, the simplest functions that still cause that problem.
function additionFormValidate() {
if ($('#form-modal').is(':visible')) {
secondPage();
} else {
console.log("modal didnt open");
}
}
function secondPage() {
$("#form-modal").modal("hide");
}
HTML
<div class="modal fade" id="form-modal" onclick="openModal()" tabindex="-1" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content"></div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" onclick="additionFormValidate()">Next</button>
</div>
</div>
</div>
does anyone familiar with this?
sometimes you need setTimeout() to prevent javascript to working too fast.
demo: http://jsbin.com/remevolemi/3/edit?html,output
$('.btn1').click(function(){
$('#modal1').find('.modal-body').text('first content');
$('#modal1').modal('show');
});
$('.btn-next').click(function(){
$("#modal1").modal('hide'); //hide modal
setTimeout(function(){
$("#modal1").find('.modal-body').text('second content'); //change modal content
$('#modal1').modal('show');//show modal again
}, 500); //wait 0.5 sec
});
here some example for another case: http://jsbin.com/edit?html,output
I open a modal, then on click of a div within the modal I want to close that modal and open another one. But when I do this it closes the first modal and only shows the background of the second modal with the body not displayed.
My HTML is:
<div id="test-modal" class="modal hide fade" data-keyboard="true">
<div class="modal-body">
<div id="option"><p>Click here to show the next modal</p></div>
</div>
</div>
<div id="test-modal2" class="modal hide fade" data-keyboard="true">
<div class="modal-body">
<p>modal show after a hide doesn't work?</p>
</div>
</div>
and my jquery is:
$('.option').click(function() {
$('#test-modal').modal('hide');
$('#test-modal2').modal('show');
});
This can help:
Remove hide class from modals divs
You use .option in your selector, but in html you use id="option", so change them
Working version
My Stupid mistake the jquery works. I accidently didnt close off the first modal properly which is why the animation wouldnt finish and cause the second modal to not load. I simply put the secondary modal on top of the first modal to test and it worked.
Please try using this data-dismiss attribute on close button.
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
I have a authentication page which use the modal to display the form.
If login/password are correct, users got redirected to a SPA.
If they are not correct, I'll need to show the exact same page with the login form open and an error message.
Is there a way to show a view with the twitter bootstrap already open, no effect/delay.
I also need to have the data-dismiss button act like he is supposed to.
Here is a jsfiddle : http://jsfiddle.net/3kgbG/267/
// no black overlay, dismiss not binded
Here's a fiddle where it automatically opens - fiddle
Pulled that right from the Bootstrap site - Bootstrap Modals
$('#myModal').modal('show');
For a pure HTML approach:
The wrapper for the modal has a class fade. This class is what provides the animation, so not adding the class will cause the modal to just appear.
You can then add data-show="true" so that the modal opens when it is initialized.
$( document ).ready(function() {
$('#myModal').modal({
//options for modal
})
});
This will open your modal on document ready. Check out any additional options here
To remove the fade effect you have to remove it from the modal wrapper class:
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
Becomes
<div class="modal bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
I just attached a bootstrap modal to a button on a Wordpress site, and it's working great.
But the problem is, the modal hides the navigation menu (specifically the "blog" link) when it's inactive, the first time. After you open the modal and close it out, the modal disappears and the menu works fine.
I've tried a few things, like fiddling with the z-index, and also I tried hacking a script together:
<script>
jQuery(document).ready(function() {
jQuery('#subscribe').modal('hide')
});
</script>
So far, no dice. But maybe you can tell from the script, I'd just like to put the modal on hidden state when the page loads, and only have it called when they click the button.
Here's my site. If you try clicking on the "blog" link on a laptop or smaller screen, you can't, because it's hidden by the modal:
http://jackalopemedia.com/jasontreu
Appreciate any help!
Ok I found the solution
You must add a class called hide. Because fade function is to set opacity:0 of the div. So its just hide in-front of the page.
So your line should be
<div id="subscribe" class="modal hide fade" role="dialog">
For more details visit bootstrap
Compare Your Modal With This, If Your Code Match With This, It Should Be Working.
<div class="modal fade hide" id="myModal" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h2>Title</h2>
</div>
<div class="modal-body">
<span>body</span>
</div>
<div class="modal-footer">
<span id="spanbtnclode" > <button type="button" class="btn btn-default" data-dismiss="modal">Close</button></span>
</div>
</div>
</div>
</div>