基于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(); | 关闭弹窗 |