移动端组件——弹出框(block)
基于Jquery响应式弹出框,适合移动端应用。近期会总结一些之前做过的简单的移动端小插件,都比较简单,但是还不够完善,后面会进一步优化。
基于Jquery响应式弹出框,适合移动端应用。近期会总结一些之前做过的简单的移动端小插件,都比较简单,但是还不够完善,后面会进一步优化。
需要引用的文件:
<script src="js/jquery-1.10.2.min.js"></script> <link rel="stylesheet" href="css/dora.css"/> <script src="js/dora.js"></script>
注意:
1、jquery是基础文件
2、dora.css 是组件相关样式
3、dora.js 是组件所涉及到的js
使用方法:
$('#blockMe').click(function(){ $.block({ message : $('#blockContent'), overClass : 'block-a' }); });
示例:
<script> $(function(){ $('#blockMe').click(function(){ $.block({ message : $('#blockContent'), overClass : 'block-a' }); }); $('#yes').click(function(){ alert('confirm ok') }); $('#no').click(function(){ $.unblock(); }) }) </script> <div id="blockContent" class="block-content" style="display: none;"> <h3>弹窗标题</h3> <p>自定义弹窗内容...</p> <div class="block-footer"> <button type="button" class="btn btn-default" id="no">取消</button> <button type="button" class="btn btn-primary" id="yes">继续</button> </div> </div> <button type="button" class="btn btn-default" id="blockMe">打开block窗口</button>
参数配置:
参数 | 说明 | 必须 |
message | 传入弹框对象,必须是jquery对象(通过ID获取) | 是 |
overClass | 重写弹框样式 | 否 |
功能方法接口:
方法名 | 使用示例 | 说明 |
unblock | $.unblock(); | 关闭弹窗 |
很赞哦! ( 0
)
相关文章
- 第8天 二进制文件上传—上传实例
- Express 4.8.x—mongoose 查询操作
- Express 4.8.x—mongoose的增删改
- Express 4.8.x—创建mongoose model
- Express 4.8.x—JADE模版引擎
- Express 4.8.x—EJS 模版引擎
- Express 4.8.x—必备中间件的使用
- Express 4.8.x—Express 中间件原理
- Express 4.8.x—资源分离技巧
- Express 4.8.x—路由权限控制技巧
- Express 4.8.x—Response 响应对象
- Express 4.8.x—Request 对象实例讲解