JQuery扩展之CustomBox.js

时间：2015-10-15 23:46:07 阅读：2520 评论：0 收藏：0 [点我收藏+]

标签：

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

JQuery扩展之CustomBox.js

标签：

原文地址：http://www.cnblogs.com/Francis-YZR/p/4883956.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行