5

I have a handful of different modal dialogs that contain different content. Basically, click button1 displays modaldialog1...click button2 displays modaldialog2, etc, etc.

How can I reuse that html code within JavaScript or some other reusable container and pass in data to one reusable modal?

Essential Code for button1 click and supporting code for modalDialog1:

Button Code (for click to display modal)

<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

HTML for displaying the modal...How can I reuse this code say within a JavaScript function or some other way and pass in some variables for Modal Header and classIDThatContainstheContentsforModal so that the modal can be reusable?

Not sure if this could go into a JavaScript or some other methodology.

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal Header</h3>
  </div>
  <div class="modal-body">
    <div id="container" class="classIDThatContainstheContentsforModal">
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>
BenMorel
  • 34,448
  • 50
  • 182
  • 322
genxgeek
  • 13,109
  • 38
  • 135
  • 217

3 Answers3

5

try this

<a class="btn" onclick="ShowModal('My Header 1','My_Class_ID_1')">Launch demo modal 1</a>
<a class="btn" onclick="ShowModal('My Header 2','My_Class_ID_2')">Launch demo modal 2</a>
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
    aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
            ×</button>
        <h3 id="myModalLabel">
            Modal Header</h3>
    </div>
    <div class="modal-body">
        <div id="container" class="classIDThatContainstheContentsforModal">
        </div>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">
            Close</button>
        <button class="btn btn-primary">
            Save changes</button>
    </div>
</div>
<script type="text/javascript">
    function ShowModal(header, contentClassID) {
        $('#myModalLabel').html(header);
        $('#container').removeAttr('class'); //if alredy exists remove it
        $('#container').addClass(contentClassID);
        $('#myModal').modal('show');
    }
</script>
sangram parmar
  • 8,462
  • 2
  • 23
  • 47
  • Very cool! How could I wrap both the html
    and the ShowModal into a .js file or some other file so that I could just import for every modal that I use from any html file?     – genxgeek Jul 15 '13 at 16:57
2

You can show modal via javascript:

     <script type="text/javascript">
        function launchModal() {
            $("#myModal").html($("#modalTemplate").html()).modal();

        }

    </script>

    <a href="javascript:launchModal()" role="button" class="btn" >Launch demo modal</a>

    <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-    labelledby="myModalLabel" aria-hidden="true">

   </div> 

   <div id="modalTemplate" style="display:none">
      <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal Header</h3>
  </div>
  <div class="modal-body">
    <div id="container" class="classIDThatContainstheContentsforModal">
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>

</div>
Douglas
  • 490
  • 3
  • 8
-1

I know this is an old thread but yes here Bootstrap modal: close current, open new you can get the solution for Bootstrap 3.x.

Community
  • 1
  • 1
Avnish Tiwary
  • 2,188
  • 22
  • 27