asked on

Can I have one MODAL for several buttons

Can I have one MODAL with several buttons and just change the MODAL-BODY ? Right now I have :

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Q & A</button>


<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
                  <p>This is a test</p>
      </div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

But I would like to have that same modal, and then be able to send the modal-body according to the button that was pressed. I want to do this to avoid writing a modal per button (coding would be too long and I just want to modify the modal content.
Ex, Button 1 - modal this is button 1 content
Button 2 - modal this is button 2 content
Button 3 - modal this is button 3 content
etc...

HainKurt

maybe something like this work

https://jsfiddle.net/2fqdgf03/

<button type="button" class="btn btn-primary" onClick="modal(this, 'modal','#myModal1')">M1</button>
<button type="button" class="btn btn-primary" onClick="modal(this, 'modal','#myModal1')">M2</button>
<button type="button" class="btn btn-primary" onClick="modal(this, 'modal','#myModal1')">M3</button>

Open in new window

function modal(btn, tgl, trg) {
  $(btn).data("toggle", tgl);
  $(btn).data("target", trg);
}

Open in new window

This question needs an answer!

Become an EE member today

7 DAY FREE TRIAL

Members can start a 7-Day Free trial then enjoy unlimited access to the platform.

View membership options

Learn why we charge membership fees

We get it - no one likes a content blocker. Take one extra minute and find out why we block content.