依赖

  • 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');

效果