您的位置:首页 - jQuery
jquery弹窗
效果体验网址:
http://keleyi.com/keleyi/phtml/jquery/1.htm


以下是完整代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>弹出窗体-柯乐义</title>
<link rel="Stylesheet" type="text/css" href="http://keleyi.com/keleyi/phtml/jquery/1/DialogByKeleyi.min.css" />
</head>
<body>
<a href="http://keleyi.com/a/bjac/j4kedhuq.htm" target="_blank">原文</a> jquery实现弹出窗体,请点击下列按钮体验。

<div style="width:320px;margin:120px auto 20px auto;">
<input type="button" value="弹出提示框" id="btnAlert" />
<input type="button" value="弹出确认框" id="btnConfirm" />
<input type="button" value="引用其他页面" id="btnDialog" /></div>

<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://keleyi.com/keleyi/phtml/jquery/1/DialogByKeleyi.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#btnAlert").click(function () {
$.DialogBySHF.Alert({ Width: 400, Height: 300, Title: "提示信息", Content: '你好,这是弹出提示,即JS中的alert', ConfirmFun: test });
})
$("#btnConfirm").click(function () {
$.DialogBySHF.Confirm({ Width: 400, Height: 300, Title: "提示信息", Content: '你好,这是确认信息,类似于JS中的confirm', ConfirmFun: test, CancelFun: testCancel });
})
$("#btnDialog").click(function () {
$.DialogBySHF.Dialog({ Width: 1024, Height: 768, Title: "jquery ui dialog", URL: 'http://keleyi.com/a/bjac/5939d3b2c920ff6d.htm' });
})
})
function test() {
$.DialogBySHF.Alert({ Width: 400, Height: 300, Title: "确认后执行方法", Content: '确认后执行的方法' });
}
function testCancel() {
$.DialogBySHF.Alert({ Width: 400, Height: 300, Title: "取消后执行方法", Content: '取消后执行的方法' });
}
</script>

</body>
</html>



最近项目中频繁遇到需要弹出窗口的功能,一直使用浏览器默认的Alert和Confirm弹窗,感觉视觉效果不是那么好,而从网上下载的话又找不到合适的,找到的话有些也是十分臃肿,有时候感觉学习配置的功夫自己也就搞一个了(顺便说一句,我呢,属于比较懒的那种人,如果学习和配置需要花很多时间的话我一般是懒得学习的)。

于是就本着“自己动手,丰衣足食”的原则,自己做了一个弹出的效果,以满足自己的“小小”的需求,可以直接通过配置CSS来修改相关样式。

主要是将Javascript中的alert和confirm这两个默认的弹窗进行了美化,在做的过程中使用了部分CSS3的一些属性,因此可能在部分低智商的比如IE系列的6、7上面会出现一些偏差,但整体上还是兼容的。

我的设计主要支持的功能如下:

1、在当前窗口的正中位置弹出窗口;

2、弹出窗口之后,有一个半透明的遮罩层将后面的内容挡着;

3、能够支持弹窗的拖动(这个功能刚好能用到前一段时间写的那个鼠标拖拽效果,可以点击这里查看,顺便将鼠标拖拽效果进行了一下更新,修订了一点点BUG);

4、部分参数的可配置;

5、可以在弹窗中引用其他的URL

6、点击确定或者取消之后可以定义要执行的函数
本站导航
相关文章
柯乐义 Copyright© keleyi.com