Menu
I'm pretty new to coding, so please pardon my inexperience.
I'm currently working on making a website, and want to have button modals. I can't seem to get it working, and have experimented with it for at least a few hours. This is what I have written in my html file, which was taken from the Twitter Bootstrap site:
<a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a>
<div class="modal" id="myModal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<a href="#" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
Am I missing something here? Do I need add something else? The bootstrap site said to "call the modal via javascript", but I didn't know where to put the $('#myModal').modal(options). I placed it in the .html AND the .js file, but neither attempt worked.
The .html file already has
<script src="js/bootstrap-modal.js"></script>
along with all the other plugins, but this doesn't seem to be doing anything. It's also worth noting that I am working locally on my computer.
I'm sure this is a very easy question, but ANY help would be greatly appreciated.
EDIT:I managed to get it working. Looked like my problem was that I was sourcing bootstrap-modal.js, when really I only had bootstrap.js. I made a new file called boostrap-modal.js with the code, and it worked fine.
However, I'm still unable to get the fade in transition. I've used the bootstrap-transition.js files but still can't seem to get it down. Additional help would be greatly appreciated.
241
Twitter Bootstrap is a front end framework to develop web apps and sites fast. In modern web development, there are several components which are required in almost all web projects. Bootstrap provides you with all those basic modules - Grid, Typography, Tables, Forms, Buttons, and Responsiveness.
Bootstrap is referred to as Twitter Bootstrap because it was developed by two employees Mark Otto and Jacob Thornton at Twitter. It was originally called Twitter Blueprint before it was released as an open-source project on Github in August of 2011.
Twitter Bootstrap is an open source front end framework for HTML, CSS and JS, using which we can create a responsive UI for our web application. This is supported by all major browsers.
To trigger the modal window, you need to use a button or a link. Then include the two data-* attributes: data-toggle="modal" opens the modal window. data-target="#myModal" points to the id of the modal.
* Updated the bootstrap stylesheet path on the fiddle, it changed since I wrote this answer.
You need to include the jQuery script before the bootstrap-modal.js script file for the plugin to work, here is the script straight from googles CDN that you can include freely in your page, just make sure to include it before any js that you might have:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
You only need to call the script if you want it to display when your page loads, otherwise you just need to have the proper data-* attribute and href reference in your modal button which you already have:
<a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a>
You can include all scripts at the end of your <body> tag for faster content loading, the same way the twitters bootstrap demo page has it.
Here is a demo of a modal page:
http://jsfiddle.net/3v2zg/626/
51
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
