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

可以用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

}

})

})

使用bootstrap 3，那就简单了，应为bootstrap3已经内置支持该功能。

我们只需要用data-href代替href，如下所示：

<a href="#" data-href="delete.php?id=23" data-toggle="modal" data-target="#confirm-delete">删除记录 #23</a>

<button class="btn btn-default" data-href="/delete.php?id=54" data-toggle="modal" data-target="#confirm-delete">

删除记录 #54

</button>

#confirm-delete指向HTML中的模式框(modal)代码，例如：

<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

<div class="modal-dialog">

<div class="modal-content">

<div class="modal-header">

请确认

</div>

<div class="modal-body">

确认删除该记录吗？

</div>

<div class="modal-footer">

<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>

<a class="btn btn-danger btn-ok">删除记录</a>

</div>

</div>

</div>

</div>

然后添加一点javascript代码即可：

$('#confirm-delete').on('show.bs.modal', function(e) {

$(this).find('.btn-ok').attr('href', $(e.relatedTarget).data('href'))

})

Bootstrap 2.3

对于2.3版本的bootstrap,代码应该是这样的：

$('#modal').on('show', function() {

var id = $(this).data('id'),

removeBtn = $(this).find('.danger')

removeBtn.attr('href', removeBtn.attr('href').replace(/(&|\?)ref=\d*/, '$1ref=' + id))

})

---