Bootstrap Modals

by Tugzrida

HTML

Note that this page uses the standard distribution of Bootstrap and not the one used in Herald. They look 99.9% the same but we had that problem with the dropdowns so you never know.<br><br>
<!-- Button trigger modal -->
<p><button class="btn btn-primary" data-toggle="modal" data-target="#myModal"> Button 1 </button></p>
 
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">Modal 1</h4>
            </div>
            <div class="modal-body">As you can see in the code to the left, line 2 is where button 1 is coded. <br><br><pre>class="btn btn-primary"</pre> defines what the button looks like. This is only important for changing the colour of the button. The different names of the colours are on the website you <a href="http://elearning.3rdwavemedia.com/blog/add-useful-bootstrap-components-to-moodle-theme-gourmet/1939/">linked to me.</a>(Part 4: Buttons)<br><br><pre>data-toggle="modal"</pre> is required for all buttons or links that activate a modal. The next part is what is important.<br><br>#myModal tells the button what modal to operate. You can see in line 5 where Modal 1 is defined as myModal (id="myModal") Note that when using this ID in the button it has a # in front of it but not in the modal. The problem you have is that Button 2, coded on line 27, also points to #myModal so therefore also opens Modal 1. Even though Button 2 is with the code for Modal 2, the way the code works is it goes with the first modal as it is written in the code.<br><br> I have fixed this by changing Modal 2's ID to "myModal2" (line 30) Button 2 points to #myModal so will therefore point to this same modal however Fixed Button 2 points to...