如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框

 我来答
你猜我猜哇擦猜
2016-03-28 · TA获得超过2.8万个赞
知道大有可为答主
回答量:2万
采纳率:0%
帮助的人:6742万
展开全部
可以用jDialog插件实现,jDialog是一款基于jquery实现的轻量级多种类型的自定义对话框插件在项目开发中、一般会美化 alert();
参考如下:
<center>
<button id="test1">alert方式调用</button>
<br/><br/>
<button id="test2">confirm方式调用</button>
<br/><br/>
<button id="test3">iframe方式调用</button>
<br/><br/>
<button id="test4">只显示内容对话框</button>
<br/><br/>
<button id="test5">对话框配置按钮</button>
<br/><br/>
<button id="test6">message方式调用</button>
<br/><br/>
<button id="test7">tip方式调用</button>
</center>

以下是JS代码
$("#test1").click(function(){
var dialog = jDialog.alert(´欢迎使用jDialog组件´,{},{
showShadow: false,// 不显示对话框阴影
buttonAlign : ´center´,
events : {
show : function(evt){
var dlg = evt.data.dialog;
},
close : function(evt){
var dlg = evt.data.dialog;
},
enterKey : function(evt){
alert(´enter key pressed!´);
},
escKey : function(evt){
alert(´esc key pressed!´);
evt.data.dialog.close();
}
}
});
}) ;

$("#test2").click(function(){
var dialog = jDialog.confirm(´欢迎使用jDialog组件,我是confirm!´,{
handler : function(button,dialog) {
alert(´你点击了确定!´);
dialog.close();
}
},{
handler : function(button,dialog) {
alert(´你点击了取消!´);
dialog.close();
}
});
});

$("#test3").click(function(){
// 通过options参数,控制iframe对话框
var dialog = jDialog.iframe(;,{
title : ´
width : 1100,
height : 550
});
});

$("#test4").click(function(){
// 通过options参数,控制dialog
var dialog = jDialog.dialog({
title : ´自定义对话框´,
content : ´
});
});

$("#test5").click(function(){
// 通过options参数,控制dialog
var dialog = jDialog.dialog({
title : ´自定义对话框´,
content : ´;,
buttons : [
{
type : ´highlight´,
text : ´你好´,
handler:function(button,dialog)
{
dialog.close();
}
}
]
});
});

$("#test6").click(function(){
var dialog = jDialog.message(´´,{
autoClose : 3000, // 3s后自动关闭
padding : ´30px´, // 设置内部padding
modal: true // 非模态,即不显示遮罩层
});
});

$("#test7").click(function(){
var dialog = jDialog.tip(´´,{
target : $(´#test7´),
position : ´left-top´,
trianglePosFromStart :0,
autoClose : 1000,
offset : {
top :-20,
left:10,
right:0,
bottom:0
}
});
})
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式