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>×</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>×</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>×</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);}
时间： 2024-10-07 03:41:20