javascript - 使用 Bootstrap 模式的 Ajax 加载

Question

我有 Bootstrap 模式 please click to see demo我的模式一直自动打开和自动关闭，我还需要一件事是 ajax 内容，我想它可以与加载功能一起使用我找到了一些功能，但我无法应用它，因为我不想通过点击加载链接我必须在模式打开后自动加载

我有两个属性 data-open 和 data-close 来自动打开和关闭我的模式

$(function(){
  setTimeout(function(e){
    $('#AniPopup').modal('show');
  }, parseInt($('#AniPopup').attr('data-open')) * 1000);
  setTimeout(function(e){
    $('#AniPopup').modal('hide');
  }, parseInt($('#AniPopup').attr('data-close')) * 1000);
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>



<div class="modal fade" id="AniPopup" tabindex="-1" role="dialog" aria-labelledby="AniPopupLabel" aria-hidden="true"  data-close="1000" data-open="2" data-src="https://www.youtube.com">
  <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" id="memberModalLabel">Popup Header</h4>
      </div>
      <div class="modal-body"></div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Kapat</button>
      </div>
    </div>
  </div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 1

Bootstrap 为您提供了这些选项

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...probably make an ajax call and get data 
})

$('#myModal').on('shown.bs.modal', function (e) {
  // do something...
})

http://getbootstrap.com/javascript/#modals