Включение модальной версии (Bootstrap версии 3.3.6) с помощью опции выбора?

Question

Пример: Когда я выбираю опцию «volvo», появляется модальная мода. Модальные не отображаются правильно.

<label>Recinto</label> 
    <select class="form-control" data-toggle="modal" data-target="#cria-recinto"> 
     <option data-toggle="modal" data-target="#cria-recinto">O meu coliseu</option> 
     <option>volvo</option> 
     <option>A minha arena</option> 
     <option>a garagem da minha vizinha</option> 
     <option>Na esquina</option> 
    </select> 


<script type="text/javascript"> 
    $('select').change(function() { 
    if ($(this).val() == "volvo") { 
    $('#cria-recinto').modal('show'); 

} 
}); 
</script> 

Answer 1

Это может помочь вам

HTML

<label>Recinto</label> 
<select class="form-control"> 
    <option>O meu coliseu</option> 
    <option>volvo</option> 
    <option>A minha arena</option> 
    <option>a garagem da minha vizinha</option> 
    <option>Na esquina</option> 
</select> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" 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> 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
     Show what you want 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div> 
    </div> 
</div> 

JavaScript

$(document).ready(function() { 
    $('select').change(function() { 
    if ($(this).val() == "volvo") { 
     $('#myModal').modal('show'); 
    } 
    }); 

}); 

Working Fiddle