JQuery扩展之CustomBox.js

CustomBox.js, JQuery , 弹出框

概要:最近在Jquery插件的官网看到了一个很好玩的JQuery插件(CustomBox),一个非常偏亮且实用的弹出框.在这里总结一下:

直接上代码:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>FrameLayer</title>
    <script src="/FrameLayer/Js/jquery-1.8.0.min.js"></script>
    <script src="/FrameLayer/Js/custombox.js"></script>
    <script src="/FrameLayer/Js/legacy.js"></script>
    <link href="/FrameLayer/Css/bootstrap.min.css" rel="stylesheet" />
    <link href="/FrameLayer/Css/custombox.min.css" rel="stylesheet" />
    <link href="/FrameLayer/Css/demo.css" rel="stylesheet" />
    <script>
        $(function () {
            $(‘#element‘).on(‘click‘, function (e) {
                Custombox.open({
                    target: ‘#modal‘,
                    effect: ‘fadein‘
                });
                e.preventDefault();
            });
        });
    </script>
</head>
<body>
    <input type="button" value="ClickMe" id="element" />
</body>
</html>
<div id="modal" class="modal-demo">
    <button type="button" class="close" onclick="Custombox.close();">
        <span>&times;</span><span class="sr-only"></span>
    </button>
    <h4 class="title">Modal title</h4>
    <div class="text">
        Content
    </div>
</div>

效果:

支持AJax:

修改target属性:

 <script>
        $(function () {
            $(‘#element‘).on(‘click‘, function (e) {
                Custombox.open({
                    //target: ‘#modal‘,
                    target: ‘/ajaxhandler.html‘,
                    effect: ‘fadein‘
                });
                e.preventDefault();
            });
        });
    </script>

新增一个ajaxhandler.html文件:

    <div id="modal" class="modal-demo" style="display: block;">
    <button type="button" class="close" onclick="Custombox.close();">
        <span>&times;</span><span class="sr-only"></span>
    </button>
    <h4 class="title">Modal title</h4>
    <div class="text">
       ContentByHtml
    </div>
</div>

通过.ashx实现ajax:

 <script>
        $(function () {
            $(‘#element‘).on(‘click‘, function (e) {
                Custombox.open({
                    //target: ‘#modal‘,
                    //target: ‘/ajaxhandler.html‘,
                    target: ‘/ajaxhandler.ashx‘,
                    effect: ‘fadein‘
                });
                e.preventDefault();
            });
        });
    </script>

ajaxhandler.ashx文件:

public void ProcessRequest(HttpContext context)
        {
            string value = "<div id=‘modal‘ class=‘modal-demo‘ style=‘display: block;‘><button type=‘button‘ class=‘close‘ onclick=‘Custombox.close();‘><span>&times;</span><span class=‘sr-only‘></span></button><h4 class=‘title‘>Modal title</h4><div class=‘text‘>ContentByAshx</div></div>";
            context.Response.Write(value);
        }

通过effect属性可以实现很好很多的弹出效果.

比如代码可以修改成如下:

回调事件Events:

1.open()

2.Complete()

3.Close()

详情请看官网,这里就说到这里.

END

v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}