Question

我有一个模式，我希望在函数被触发之前显示，然后我想在函数完成后立即隐藏模态。我的问题是模态不会启动，除非我先在页面上做一些事情，比如警报。我将在下面发布我的代码：

$j('#myModal').modal('show');
SearchNew(searchParameters);

SearchOld(searchParameters);    
$j('#myModal').modal('hide');

上面启动模态并在最后一个函数完成后立即隐藏它。

以下是有效的，因为我有一个警告，它是页面上的一个动作。然后它会正确打开模态并在最后一个函数完成后关闭它。

$j('#myModal').modal('show');
alert('test');
SearchNew(searchParameters);

SearchOld(searchParameters);    
$j('#myModal').modal('hide');

任何人都可以向我解释为什么会这样吗？这些功能在点击时启动。

Answer 1

这个例子：

（1）点击按钮时显示模态

（2）模仿运行一个函数（使用setTimeout）

（3）当功能（例如超时）完成时关闭模态

setTimeout函数取代了您正在运行的函数的回调 - 这是关闭模态的地方。

$('#myModal').modal('hide'); //initialize

$('button').click(function(){
    $('#myModal').modal('show');
    $('#msg').html('The function is updating this div').show();
    setTimeout(function(){
        $('#myModal').modal('hide');
    },2000);
});

* {position:relative;box-sizing:border-box;}
button{cursor:pointer;}
#msg{position:absolute;width:150px;height:100px;font-size:1.5rem;background:wheat;color:darkcyan;border:1px solid orange;display:none;}

<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.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<button id="go">Click Me</button>

<!-- Modal -->
<div id="myModal" class="modal fade" 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>

  </div>
</div>

<div id="msg"></div>

从本质上讲，这是你做事的方式吗？如果没有，请就必须适应的差异提出建议。

jQuery在页面上发生某些事情之前不会触发

1 个答案: