What’s the tabindex=”-1″ in bootstrap for

The tabindex attribute explicitly defines the navigation order for focusable elements (typically links and form controls) within a page. It can also be used to define whether elements should be focusable or not. [Both] tabindex=”0″ and tabindex=”-1″ have special meaning and provide distinct functionality in HTML. A value of 0 indicates that the element should … Read more

Bootstrap modal: is not a function

You have an issue in scripts order. Load them in this order: <!– jQuery –> <script src=”https://code.jquery.com/jquery-1.11.0.min.js”></script> <!– BS JavaScript –> <script type=”text/javascript” src=”https://stackoverflow.com/questions/25757968/js/bootstrap.js”></script> <!– Have fun using Bootstrap JS –> <script type=”text/javascript”> $(window).load(function() { $(‘#prizePopup’).modal(‘show’); }); </script> Why this? Because Bootstrap JS depends on jQuery: Plugin dependencies Some plugins and CSS components depend on … Read more

Vertically centering Bootstrap modal window

This does the job : http://jsfiddle.net/sRmLV/1140/ It uses a helper-div and some custom css. No javascript or jQuery required. HTML (based on Bootstrap’s demo-code) <button class=”btn btn-primary btn-lg” data-toggle=”modal” data-target=”#myModal”>Launch demo modal</button> <!– Modal –> <div class=”modal fade” id=”myModal” tabindex=”-1″ role=”dialog” aria-labelledby=”myModalLabel” aria-hidden=”true”> <div class=”vertical-alignment-helper”> <div class=”modal-dialog vertical-align-center”> <div class=”modal-content”> <div class=”modal-header”> <button type=”button” class=”close” … Read more

Launch Bootstrap Modal on Page Load

Just wrap the modal you want to call on page load inside a jQuery load event on the head section of your document and it should popup, like so: JS <script type=”text/javascript”> $(window).on(‘load’, function() { $(‘#myModal’).modal(‘show’); }); </script> HTML <div class=”modal hide fade” id=”myModal”> <div class=”modal-header”> <a class=”close” data-dismiss=”modal”>×</a> <h3>Modal header</h3> </div> <div class=”modal-body”> <p>One … Read more