扫码关注官方订阅号
斜体文字
标题1 × 内容 是 否
内容
是 否
比如我点击另外一个按钮是标题改变内容不变,modal-footer按钮也要改变变怎么做?
光阴似箭催人老,日月如移越少年。
我用jQuery写点代码勿喷因为不知道你要什么效果,这就是最简单的根据不同的按钮显示不同的标题和按钮,主要思想就是,找到dialog中相应的元素,并且改变他们的html内容
$("btn1").click(function(){ var _d=$(".modal-dialog"); _d.find("h3").html("btn1"); _d.find(".modal-footer").find("input").each(function(i,v){ v.html("btn1//"+i); }); }); $("btn2").click(function(){ var _d=$(".modal-dialog"); _d.find("h3").html("btn2"); _d.find(".modal-footer").find("input").each(function(i,v){ v.html("btn2//"+i); }); });
最好的方式是将你这些UI组件进行封装,我这里写个简单的
var content = [ '<p class="modal fade" role="dialog">', '<p class="modal-dialog">', '<p class="modal-content">', '<p class="modal-header">', '<h3></h3>', '<button type="button"class="close" data-dismiss="modal">×</button>', '</p>', '<p class="modal-body"></p>', '<p class="modal-footer">', '<button type="button" class="button blue">是</button>', '<button type="button" class="button white" data-dismiss="modal">否</button>', '</p>', '</p>'].join(''); function Dialog(options) { if (!(this instanceof Dialog))throw 'should new a dialog'; options = options || {}; var $el = $(content).appendTo('body'); $el.find('.modal-header h3').html(options.title); $el.find('.modal-body').html(options.content); options.btns.forEach(function (btn, index) { var key = Object.keys(btn)[0]; var onclick = btn[key]; $el.find('.modal-footer button').eq(index).on('click', onclick); }); $el.find('.close').on('click', function () { $el.remove(); }); } new Dialog({ title: '标题一', content: '内容一', btns: [ { '确定': function () { console.log(this); } }, { '取消': function () { } } ] }); new Dialog({ title: '标题二', content: '内容二', btns: [ { '提交': function () { } }, { '关闭': function () { } } ] });
function changetitle(num){ switch(id){
case 1: $('.modal-content').on('show.bs.modal', function (e) { //这里面去改变标题1的内容 }); break; case 2: $('.modal-content').on('show.bs.modal', function (e) { //这里面去改变标题1的内容 }); break; }
}
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
我用jQuery写点代码勿喷
因为不知道你要什么效果,这就是最简单的根据不同的按钮显示不同的标题和按钮,主要思想就是,找到dialog中相应的元素,并且改变他们的html内容
最好的方式是将你这些UI组件进行封装,我这里写个简单的
function changetitle(num){
switch(id){
}