bootstrap弹出多个模态框_扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框...

js代码

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

'

+ '×'

+ '

' + options.title + '

'

+'

';

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

'

+ '

'

+ '

'

+ '

'

+ '

'

+'

';

$(template).appendTo('body');

initView();

return _id;

},

body : '

};

//TO END

页面代码：

target="dialog" title="请选择用餐类型">签到

页面上只要在a标签后加上target="dialog"，并且提供href外部链接地址就可以弹出modal框

以上所述是小编给大家介绍的扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

本文标题: 扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框

本文地址: http://www.cppcns.com/ruanjian/java/179992.html