How to change data-target of a button within a modal using Javascript?

Question

I have a button within a modal. When I press the button, I want that modal to close, and another modal to open. However, the modal that opens isn't the same each time, so the data-target on the button needs to change each time it is pressed.

In order to close the modal, I have data-dismiss="modal" in the attributes of the button.

I have three modals with ID's 1,2,3. I want to use the random Javascript function to choose which one opens

var randomnumber = num.toString(Math.floor(Math.random() * (3 - 1 + 1)) + 1);

I tried doing this, but it didn't work:

$('#button').click(function() {
$(randomnumber).modal('show');

Ah I see, I just wrote them on here as plain numbers for simplicity by in my code I append the random numbers to a string eg. `"modal-1"` — Tom Reed, Jul 25 '18 at 14:10

Mohammad · Accepted Answer · 2018-07-26T23:45:50.913

Update : this code ,each time will open a random modal and close other one.

 $('.fade').hide();
$('.btn-info').click(function()
{
var randomnumber =Math.floor(Math.random() * 3) + 1;
  $('.fade').hide();
  $('#m'+randomnumber).show(10);
  alert("modal" + randomnumber)
});


$('#btn3').click(function()
{
   $('.fade').hide();
  $('#myModal').show();
 
});

$('.close').click(function()
{
   $('.fade').hide();

});

.fade
{
display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button"  class="btn btn-info2 btn-lg" id="btn3" data-toggle="modal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;      </button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <button type="button" class="btn btn-info" id = "random" >Random Modal</button>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default close" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>


<div class="modal fade" id="m1" role="dialog" data-dismiss="modal">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;      </button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <button type="button" class="btn btn-info" id = "random">Random Modal</button>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default close" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
 <div class="modal fade" id="m2" role="dialog" data-dismiss="modal">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close">&times;      </button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <button type="button" class="btn btn-info" id = "random">Random Modal</button>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default close" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
<div class="modal fade" id="m3" role="dialog" data-dismiss="modal">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;      </button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <button type="button" class="btn btn-info" id = "random">Random Modal</button>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default close" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>

Ah thanks for correcting my syntax. I don't think this is the problem though, as when I put in the ID directly, such as '#1' and click the button it just closes the current modal and doesn't open modal 1 — Tom Reed, Jul 25 '18 at 14:00
@TomReed you are welcome , yeah i guess you need that. if it didn't work tel me then i would try it in jsfiddle — Mohammad, Jul 25 '18 at 14:12
https://jsfiddle.net/hom4t3qz/7/ even when I preselect the modal (instead of using the random function) to open I can't get it to work — Tom Reed, Jul 25 '18 at 14:24
this code will always open new modal randomly and close other one. : https://jsfiddle.net/maxofpower/hom4t3qz/30/ — Mohammad, Jul 25 '18 at 15:50
It doesn't appear to be working - should the id on modal 3 be m3? But it doesn't open a modal at all (I checked by changing the header on the 3 modals it could be) — Tom Reed, Jul 25 '18 at 19:49
jsfiddle doesn't let us doing this , i updated my posy with snipest — Mohammad, Jul 26 '18 at 23:43

How to change data-target of a button within a modal using Javascript?

1 Answers1