Question

我有一个显示模态窗口的按钮：

<button class="btn btn-primary" type="button" href="modal.html" id="btn_port" data-toggle="modal" data-target="#portModal">Toggle!</button>

以及此按钮的点击事件：

$('#btn_port').click(function(event) {
     if(not_show_modal) {
        *** not_show_modal_action ***
     }
 }

如何在按钮点击事件中按条件阻止模态窗口外观？

毕竟这是一个决定：

    $('#btn_port').click(function(event) // нажатие на кнопку "Порт" для открытия модального окна
 {

    if($("#device_select").val()!=null)
    {

       $('#portModal').attr("data-remote", "portmodal.html/"+$("#device_select").val());           
       $('#portModal').modal('show');
    }

 });

Answer 1

您可以使用event.stopPropagation()停止通话，如下所示

$('#btn_port').on('click', function(e) {
    var val = 'bla';
    //var val = null;
    if(val != null){
      e.stopPropagation();
    }
});

<强> DEMO

注意：您可以使用您的条件而不是val

Answer 2

下面是一个新示例，当value元素的select具有值时，它将允许切换功能 - 否则它将无法运行。

Select an option的值为""，将被解释为false

＆＃13;

$('[data-toggle]').on('click', function(){
  var active =  $('[data-option]').val()
  if(active) {
    var target = $(this).attr('data-toggle')
    $('[data-item="'+target+'"]').toggle();
  }
})

＆＃13;

* { text-align: center }
[data-item="menu"] {
  border: 1px solid #e2e2e2;
  margin-top: 5px;
  padding: 5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select data-option>
  <option value="">Select An Option</option>
  <option value="a">A</option>
  <option value="a">B</option>
</select>


<span data-toggle="menu">Toggle</span>

<div data-item="menu" style="display:none">
  <p>content</p>
</div>

＆＃13;

Answer 3

看看这里 - http://jsfiddle.net/h3WDq/1188/

  $('button').on('click',function(){
      if($('select').val().length>0){
      $('#myModal1').modal('show');
     }
 });

Answer 4

Bootstrap模型可以像这样显示或隐藏

$('#basicModal').modal('hide'); // To hide
$('#basicModal').modal('show'); // To show

＆＃13;

$('#model_opener').click(function(){
  if($('#check').prop('checked')){
    $('#myModal').modal('show');
  }  
})

＆＃13;

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="container">
  Open or not?:  <input type="checkbox" id="check" />
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" id="model_opener" >Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" 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>
  
</div>

</body>
</html>

＆＃13;

如何按条件取消js切换事件？

4 个答案: