菜单

关于【bootstrap modal 模态框弹出须臾间消灭的题目】

2018年12月18日 - Bootstrap

前提是你莫重新引入bootstrap.js\bootstrap.min.js和modal.js。一下提供一个多少例子。

js代码

<button class="btnbtn-primary btn-lg" type="button" data-toggle="modal" data-target="#myModal">Launchdemomodal</button>
function initView(_box){ 
  var $p = $(_box || document); 
  $('a[target="dialog"]', $p).each(function(event){ 
    $(this, $p).unbind('click').click(function(event){ 
      openModal(event); 
    }); 
  }); 
} 
$(function(){ 
  initView(); 
}); 
/**关闭modal*/ 
function hideModal(obj){ 
  var modal = $(obj).parents("div.modal"); 
  if(modal.length > 0){ 
    modal.remove(); 
    initView(); 
  } 
} 
/**打开modal*/ 
function openModal(event){ 
// var this = $(this); 
  var $this = $(event.currentTarget); 
  var _url = $this.attr("href"); 
  var _title = $this.attr("title"); 
  var _id; 
  _id = dialog.content(); 
  var options = { 
      backdrop: false, 
      keyboard: true, 
      show: true 
  }; 
  $('#' + _id).modal(options); 
  var modal = $('#' + _id); 
  if(typeof(_title) != "undefined"){ 
     if(modal.find('.modal-title').length <= 0){ 
       var header = dialog.header({title : _title}); 
       $($.parseHTML(header)).appendTo(modal.find(".modal-content")); 
     }else{ 
       modal.find('.modal-title').text(_title); 
     } 
     if(modal.find('.modal-body').length <= 0){ 
       var _body = dialog.body; 
       $($.parseHTML(_body)).appendTo(modal.find(".modal-content")); 
     } 
     modal.find(".modal-body").load(_url, $.proxy(function () { 
       modal.trigger('loaded.bs.modal'); 
       initView(); 
      }, this)); 
   }else{ 
     modal.find(".modal-content").load(_url, $.proxy(function () { 
       modal.trigger('loaded.bs.modal'); 
       initView(); 
      }, this)); 
   } 
    //阻止事件默认行为 
  event.preventDefault(); 
} 
//modal model 
//TO STRAT 
if(!$(window).data("_modal_id")){ 
  $(window).data("_modal_id", 0); 
} 
var dialog = { 
  header : function(options){ 
    var template = '<div class="modal-header">' 
            +  '<button type="button" class="close" aria-label="Close" onclick="hideModal(this);">×</button>' 
            +  '<h4 class="modal-title">' + options.title + '</h4>' 
            +'</div>'; 
    return template; 
  }, 
  content : function(){ 
    var _modal_id = $(window).data("_modal_id"); 
    var _id = "_modal_id_" + _modal_id; 
    _modal_id ++; 
    $(window).data("_modal_id", _modal_id); 
    var template = '<div class="modal fade" tabindex="-1" role="dialog" id="'+ _id +'">' 
     +  '<div class="modal-dialog modal-lg" role="document" aria-hidden="true">' 
     +   '<div class="modal-content">' 
     +   '</div>' 
     +  '</div>' 
     +'</div>'; 
    $(template).appendTo('body'); 
    initView(); 
    return _id; 
  }, 
  body : '<div class="modal-body"></div>' 
}; 
//TO END 

小心type=”button”,在需要点的按钮处,插足这无异于截就是哼了,我作了大体上只刻钟

页面代码:

type =”button”才得以触发 模态框。

<a href="select.html" rel="external nofollow" id="signId" class="btn btn-info" target="dialog" title="请选择用餐类型">签到</a> 

 

页面及而在a标签后增长target=”dialog”,并且提供href外部链接地址便得弹出modal框

参考网址:http://www.51zhidao.cn/topic/ostech-9094.html

以上所述是聊编为我们介绍的壮大bootstrap的modal模态框-动态增长modal框-弹出多独modal框,希望对我们持有帮忙,虽然我们来外疑问请于我留言,小编会及时过来我们之。在这多少个吧非常感谢我们对剧本的寒网站的支撑!


卿或许感兴趣的作品:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图