how to activate the modal window using bootstrap 3 when you select again?

advertisements

I tried this method below:

$('select').change(function () {
  var addProj = $('select option:selected').val();
  if(addProj === 'addthis'){
    $('#myModal').modal();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<select>
  <option>addthree</option>
  <option>addtwo</option>
  <option>addthis</option>
</select>

<!-- Modal -->
<div id="myModal" class="modal fade" 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">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

It's works at the beginning, but later, when I select, after I click close on the modal window, then I select from the selected option and I click again, no modal window is shows.

How can I activate the modal window even when it is selected?


If I understand you correctly, you need to initialize the modal first but not show it by passing the option show:false.

When you want to show it (like the select value equal to addthis for example, you call the plugin method show.

The full story:

var modal = $('#myModal').modal({
  show: false
});

$('select').change(function () {
  var addProj = $('select option:selected').val();
  if(addProj === 'addthis'){
    modal.modal('show');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<select>
  <option>addthree</option>
  <option>addtwo</option>
  <option>addthis</option>
</select>

<!-- Modal -->
<div id="myModal" class="modal fade" 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">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>