CODEWITHSUNDEEP
javascripthtmljquerybootstrap-modal
Jordan Kellet
Jordan Kellet

Reputation: 49

How to change Bootstrap modal content depending on button click

I need to be able to change the content inside a modal depending on the button that is clicked.

For instance, if button one is clicked it will only show the div with class 'one' and the others will remain hidden.

$('#exampleModalCenter').modal('toggle')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn" data-toggle="modal" data-target="#exampleModalCenter">one</button>

<button type="button" class="btn" data-toggle="modal" data-target="#exampleModalCenter">two</button>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery library -->


<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>


<button type="button" class="btn" data-toggle="modal" data-target="#exampleModalCenter">three</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="one">Button one content</div>
        <div class="two">Button two content</div>
        <div class="one">Button three content</div>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Views: 4113

Answers (5)

Caucorico
Caucorico

Reputation: 84

You can look at this tutorial : https://getbootstrap.com/docs/3.4/javascript/#modals-related-target

Simply add a data attribute to your button :

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#yourModal" data-name="one">Open modal for One</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#yourModal" data-name="two">Open modal for Two</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#yourModal" data-name="three">Open modal for Three</button>

And when the event occur, you can recover the attribute of the button and adapt the behavior according to it :

$('#yourModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget); // Button that triggered the modal
  var recipient = button.data('name'); // Extract info from data-* attributes

  // Here, you can change the behavior according to the button clicked :
  switch(recipient) {
    case 'one':
      $('.one').show();
      break;
    case 'two':
      $('.two').show();
       break;
    // etc...
  }
});

Upvotes: 1

Nathan Bruet
Nathan Bruet

Reputation: 222

You can do this :

$('button.btn-open-modal').on('click', function(){
    let targetClass = $(this).attr("target-class");
    $("#exampleModalCenter div.modal-body > div").each(function(){
        if($(this).hasClass(targetClass)){
            $(this).show();
        }else {
            $(this).hide();
        }
    });
    $('#exampleModalCenter').modal('toggle');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery library -->


<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<button type="button" class="btn btn-open-modal" target-class="one">one</button>
<button type="button" class="btn btn-open-modal" target-class="two">two</button>
<button type="button" class="btn btn-open-modal" target-class="three">three</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="one">Button one content</div>
        <div class="two">Button two content</div>
        <div class="three">Button three content</div>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

M Razwan
M Razwan

Reputation: 257

 

   $(document).on("click",".modal-open",function(){
        var button_val = $(this).attr("data-val");

        $('#exampleModalCenter').modal('show');
        $(".conditional-div").hide();
        $("#exampleModalCenter ."+button_val).show();
    })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn modal-open" data-val="one" >one</button>
<button type="button" class="btn modal-open" data-val="two" >two</button>
<button type="button" class="btn modal-open" data-val="three" >three</button>

   
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery library -->


<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>


  

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="one conditional-div">Button one content</div>
        <div class="two conditional-div">Button two content</div>
        <div class="three conditional-div">Button three content</div>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

ikhvjs
ikhvjs

Reputation: 5937

Example below. The logic: Whenever you click a button, hide all the content first, then you show the specific content based on the button you clicked.

Ref.: https://getbootstrap.com/docs/3.3/javascript/#modals-related-target

$(".btn").click(function () {
  $(".parent").children().each(function () {
    $(this).hide();
  });
  $(`div.${$(this).attr("id")}`).show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
/>

<!-- jQuery library -->

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<button
  id="one"
  type="button"
  class="btn"
  data-toggle="modal"
  data-target="#exampleModalCenter"
>
  one
</button>

<button
id="two"
  type="button"
  class="btn"
  data-toggle="modal"
  data-target="#exampleModalCenter"
>
  two
</button>

<button
id="three"
  type="button"
  class="btn"
  data-toggle="modal"
  data-target="#exampleModalCenter"
>
  three
</button>

<!-- Modal -->
<div
  class="modal fade"
  id="exampleModalCenter"
  tabindex="-1"
  role="dialog"
  aria-labelledby="exampleModalCenterTitle"
  aria-hidden="true"
>
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button
          type="button"
          class="close"
          data-dismiss="modal"
          aria-label="Close"
        >
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="parent">
          <div class="one">Button one content</div>
          <div class="two">Button two content</div>
          <div class="three">Button three content</div>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

step
step

Reputation: 11

You could subscribe to the modal's show.bs.modal event, check the value of the relatedTarget property of the event and then show/hide internal divs based on that target value

Upvotes: 0

Related Questions