Question

我有一个选择列表，在更改选择后，我需要显示一条消息作为弹出窗口，我使用了bootstrap模式，但是当我更改选择时它没有显示

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

有几个问题，但我认为我主要修理它：

＆＃13;

$(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');
        }
    });
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

除此之外，您还没有关闭<select>。我还从中删除了data属性，因为只要单击下拉列表，它们就会弹出显示，这使得基本上不可能实际选择一个选项。

Bootstrap模态窗口未显示

1 个答案: