如果不满足条件语句，则触发 bootstrap 模态

Question

我不想使用默认的 jquery 警报弹出窗口，而是想触发一个 Bootstrap 模式。我读过的所有教程，模态都是由 click(function(){}); 触发的。如果不满足我的 "if statement" 中的条件，我想要 if 触发。这是我的代码

var test1 = $('#test').val();

$('#go').click(function() {
  if (test1 === "") {
    alert("Please enter all values in the fields");
    $('#myModal').modal('show');
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div class="form-group">
  <label for="test" class="col-sm-3 control-label">Test</label>
  <div class="col-sm-3">
    <input type="text" class="form-control" id="test" placeholder="Enter A Value">
  </div>
</div>
<div class="form-group">
  <div class="col-sm-offset-6 col-sm-3">
    <button type="button" id="go" class="btn btn-primary">Go</button>
  </div>
</div>
<!--Modal-->
<div class="modal fade" id="#myModal">
  <div class="modal-dialog">
    <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">Modal title</h4>

      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </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>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!--End Modal-->

Answer 1

在您的情况下，由于模态框的 id 为 id="#myModal"，因此您需要在 jQuery 选择器 $('#\#myModal').modal('show') 中转义 # :

$('#go').click(function() {
  var test1 = $('#test').val();

  if (test1 === "") {
    $('#\#myModal').modal('show');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div class="form-group">
  <label for="test" class="col-sm-3 control-label">Test</label>
  <div class="col-sm-3">
    <input type="text" class="form-control" id="test" placeholder="Enter A Value">
  </div>
</div>
<div class="form-group">
  <div class="col-sm-offset-6 col-sm-3">
    <button type="button" id="go" class="btn btn-primary">Go</button>
  </div>
</div>
<!--Modal-->
<div class="modal fade" id="#myModal">
  <div class="modal-dialog">
    <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">Modal title</h4>

      </div>
      <div class="modal-body">
        <p>Please enter all values in the fields.</p>
      </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>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!--End Modal-->

Answer 2

从 id 中删除“#”，您的代码应该可以工作

<div class="modal fade" id="myModal">

如果不满足条件语句，则触发 bootstrap 模态

Trigger bootstrap modal if a condition statement is not met

javascript

jquery

twitter-bootstrap-3

alert

bootstrap-modal