引导模态窗口未显示

Question

我有一个选择列表，更改选择后，我需要将消息显示为弹出窗口，我使用了引导模式，但更改选择时未显示

 function Selectionchange() { // document.getElementById('set-project').disabled=false; var opt = $("#gsb_tb option:selected").text(); if (opt) { $("#mi-modal").modal('show'); $("#modal-btn-si").on("click", function() { $("#mi-modal").modal('hide'); }); } $("#modal-btn-no").on("click", function() { $("#mi-modal").modal('hide'); }); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <select id="gsb_tb" data-toggle="modal" data-target="#mi-modal" style="height: 45px; width: 78%; margin-left: 70px; padding-right: 90px; vertical-align: middle;" tabindex="0" autocomplete="off" onchange="Selectionchange()"> <option value="" disabled selected>Select your Project</option> <option value="370"> E-Card</option> <option value="278">B-Card</option> <option value="196">Z- Card</option> </select> <div class="modal fade" tabindex="-1" role="dialog" id="mi-modal"> <div class="modal-dialog modal-sm"> <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">Have you got a new Project?</h4> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" id="modal-btn-si">Yes</button> <button type="button" class="btn btn-primary" id="modal-btn-no">No</button> </div> </div> </div> </div> 

Answer 1

有几个问题，但我想我基本上已经解决了：

 $(function() { $("#modal-btn-no").on("click", function() { $("#mi-modal").modal('hide'); }); $("#modal-btn-si").on("click", function() { $("#mi-modal").modal('hide'); }); $("#gsb_tb").on("change", function() { var opt = $("#gsb_tb option:selected").text(); if (opt) { $("#mi-modal").modal('show'); } }); }); 

 #gsb_tb { height: 45px; width: 78%; margin-left: 70px; padding-right: 90px; vertical-align: middle; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <select id="gsb_tb" tabindex="0" autocomplete="off"> <option value="" disabled selected>Select your Project</option> <option value="370">E-Card</option> <option value="278">B-Card</option> <option value="196">Z-Card</option> </select> <div class="modal fade" tabindex="-1" role="dialog" id="mi-modal"> <div class="modal-dialog modal-sm"> <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">Have you got a new Project?</h4> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" id="modal-btn-si">Yes</button> <button type="button" class="btn btn-primary" id="modal-btn-no">No</button> </div> </div> </div> </div> 

除其他事项外，您没有关闭<select> 。 我还从中删除了data属性，因为一旦单击该下拉列表，它们就会使弹出窗口显示出来，从而使得实际上不可能选择一个选项。