移动端组件——弹出框(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
)