依赖

  • Bootstrap3
  • jquery-tmpl

模板代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script id="template-dialog-alert" type="text/x-jquery-tmpl">
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h5 class="modal-title">提示</h5>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
</script>

JS代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function FQK_Alert(content)
{
this.dialog = $('#template-dialog-alert').tmpl();

this.show = function()
{
var dialog = this.dialog;
dialog.find('.modal-body').html(content);
dialog.appendTo('body');
dialog.modal('show');

dialog.on('hidden.bs.modal', function () {
dialog.remove();
});
}
}

FQK_Alert.show = function(content)
{
var alert = new FQK_Alert(content);
alert.show();
}

// 调用
FQK_Alert.show('hehe');

效果