Question

我有自举模态please click to see demo并且我的模态已经自动打开并自动关闭我需要一个更多的东西是ajax内容我想它可以使用加载功能我发现了一些功能但我无法＆＃39 ; t应用它因为我不想加载点击链接我必须在我的模态打开后自动加载

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

你打电话给这段代码调用你的ajax请求..

long iTemp = [[dicfromDB valueForKey:@"NextNumber"] intValue] - 1;
           = 11 - 1; 
     iTemp = 10;

Answer 3

这是我在每个项目中使用的解决方案。

使用Java脚本，因此我可以在每个页面上打开模式信息：

$('body').on('click', '[data-toggle="modal"]', function(e) {
    var url = $(this).data('href');
    var modalId = '#'+$(this).prop('href').split('#')[1];
    if (url.indexOf('#') === 0) {
    } else {
        $(modalId+' div.modal-content').html(
            $(modalId+' div.modal-dialog img#ajax-loader').clone().removeClass('hidden')
        );
        $.get(url, function(data) {
            $(modalId+' div.modal-content').html(data) ;
        });
    }
});

然后，您需要在模板中使用此HTML，我将其包含在基本模板中，以便在每个页面上都可以使用它：

<div class="modal fade" role="dialog" style="display: none" id="ajax-modals">
    <!-- Fix if datepicker is used in modal -->
    <style>
        .datepicker{z-index:1151 !important;}
    </style>
    <div class="modal-dialog">
        <img src="/img/select2-spinner.gif" id="ajax-loader" class="hidden" style="margin: 20px auto; display: block;"/>
        <div class="modal-content">
            <!-- comes from ajax -->

        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>

要触发模式，您需要这样的链接：

<a data-toggle="modal" href="#ajax-modals" data-href="/ajax-url" class="btn btn-default btn-xs" >Load Modal with AJAX content</a>

至少，这是您的AJAX-Controller应该返回的内容：

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
        ×
    </button>
    <h4 class="modal-title">
        Modal title
    </h4>
</div>
<div class="modal-body">

    Modal body goes here

    <div class="form-actions">
        <button type="button" class="btn btn-default" data-dismiss="modal">
            Close window
        </button>
    </div>
</div>
<script type="application/javascript">
    $('document').ready(function(){

        //you can do some javascript here

    });
</script>

使用bootstrap模式加载Ajax

3 个答案: