利用jQuery实现自定义弹窗功能插件



8 28 10



特效描述:利用jQuery实现 自定义 弹窗功能 插件,利用jQuery实现自定义弹窗功能插件

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/animate.min.css" />
<link rel="stylesheet" href="syalert/syalert.min.css" />
<link rel="stylesheet" href="css/animate.min.css" />
<link rel="stylesheet" href="syalert/syalert.min.css" />

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="syalert/syalert.min.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="syalert/syalert.min.js"></script>

3. HTML代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<title></title>
<style type="text/css">
*{ margin:0px; padding:0px; box-sizing:border-box; }
*:focus{ outline:none;}
.tsm{ background:#333; font-size:13px; color:#fff; margin:20px; margin-top:0px; padding:12px; line-height:25px;}
.tsm .p2{ margin-top:12px;}
.btns{ padding:20px;}
.btns div{ display:block; text-align:center; cursor:pointer; padding:10px; border-radius:5px; background:#0CC; color:#fff; margin-bottom:12px; width:100%;}
</style>
</head>
<body style="background:#eee;">
<div class="btns">
<div onClick="syalert.syopen('alert1')">确认弹窗</div>
<div onClick="syalert.syopen('alert2')">消息弹窗</div>
<div onClick="syalert.syopen('alert3')">消息提示</div>
<div onClick="syalert.syopen('alert4')">模态弹窗</div>
</div>
<!-- 确认弹窗 -->
<div class="sy-alert animated" sy-enter="zoomIn" sy-leave="zoomOut" sy-type="confirm" sy-mask="true" id="alert1">
  <div class="sy-title">温馨提示</div>
  <div class="sy-content">你喜欢此插件吗?</div>
  <div class="sy-btn">
    <button onClick="syalert.syhide('alert1')">取消</button>
    <button onClick="ok('alert1')">确定</button>
  </div>
</div>
<!-- 消息弹窗 -->
<div class="sy-alert sy-alert-alert animated" sy-enter="zoomIn" sy-leave="zoomOut" sy-type="alert" sy-mask="true" id="alert2">
  <div class="sy-title">温馨提示</div>
  <div class="sy-content">提交成功,谢谢!</div>
  <div class="sy-btn">
    <button onClick="ok('alert2')">确定</button>
  </div>
</div>
<!-- 提示弹窗 -->
<div class="sy-alert sy-alert-tips animated" sy-enter="zoomIn" sy-leave="zoomOut" sy-type="tips" sy-mask="false" id="alert3"> 
  <div class="sy-content">请输入姓名</div>
</div>
<!-- 自定义弹窗 -->
<div class="sy-alert sy-alert-model animated" sy-enter="zoomIn" sy-leave="zoomOut" sy-type="confirm" sy-mask="true" id="alert4">
  <div class="sy-title">用户注册</div>
  <div class="sy-content">
    <div class="form">
    <p class="input-item"><input type="text" placeholder="请输入手机号" /></p>
    <p class="input-item"><input type="text" placeholder="请输入验证码" /><button class="getcode">获取验证码</button></p>
    <p class="input-item"><input type="text" placeholder="请输入邮箱" /></p>
    <p class="input-item"><input type="text" placeholder="请输入地址" /></p>
    <p class="input-item"><input type="text" placeholder="请输入QQ" /></p>
    <p class="input-item"><input type="text" placeholder="请输入传真" /></p>
    </div>
  </div> 
  <div class="sy-btn">
    <button onClick="syalert.syhide('alert4')">取消</button>
    <button onClick="ok('alert4')">确定</button>
  </div> 
</div>
<div class="tsm">
  <p>syalert.js 使用插件请参考index.html 里面的例子,插件依赖jquery,animate.css</p>
  <p class="p2">html 不会自动创建,请将上面弹窗HTML结构搬到自己网页</p>
  <p class="p2">具体使用方法: 
  <p>打开弹窗 syalert.syopen(id)</p>
  <p>关闭弹窗 syalert.syhide(id)</p>
  <p>其中id为弹窗自定义的ID</p>
  <p class="p2">关于动画请直接在html上定义<p>
  <p>进入动画定义:sy-enter="zoomIn"</p>
  <p>离开动画 sy-leave="zoomOut"<p>
  <p>其中 zoomIn和zoomOut是 animate.css里面的动画名称。可以将动画名称更改为animate.css里面的动画名称,动画就变了哦。 </p>  
</div>
<script>
function ok(id){
	syalert.syhide(id);	
}
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 弹出层拖动 窗口 弹出 弹窗 弹出层 提示框 对话框 遮罩 遮罩层 弹窗插件 提示框/弹出层

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到