bootstrap实现弹窗和拖动效果
更新时间:2016年1月7日 13:52 点击:1881
有时开发一些特效,自己感觉挺爽的,像操作自己电脑一样操作你的网页,这里就介绍一个使用bootstrap的一点多窗口和拖动效果吧!
这里,我们不使用静态打开的的方式,low...,1、添加一个a链接 触发,打开按钮;2、编写动态打开js脚本; 3、编写modal中间内容;4、添加拖动效果;5、打开多个modal , 调用dragModal(new Array('modalId1','modalId2'));
1、添加一个a链接 触发,打开按钮:
<a href="javascript:;" title="开关" class="open-modal-dynamic" url="index.php?m=index&c=cc&a=aa&id=22" alert='1' divid="editModal">打开modal<a> <div id="addModal" class="modal hide fade" style="max-width:800px;" data-backdrop="static"></div> <!-- 打开容器 -->
2、编写动态打开js脚本:
//打开弹窗 $('.open-modal-dynamic').on('click', function(){ var modalId = $(this).attr('divid') ? $(this).attr('divid') : 'Modal', url = $(this).attr('url'); $.get(url, function(data){ if(data.status == 1){ //禁止选择文字,在拖动时会有影响 $('html').off('selectstart').on('selectstart', function(){return false;}); $('#' + modalId).html(data.htmlData); $('#' + modalId).modal({'show':true}); }else{ alert(data.info); } }, 'json');
3、编写modal中间内容:
<style> .line{margin-bottom: 5px;} .line .left{width: 100px;text-align:right;display:block;} .form-button{padding:2px 10px;background:#73A86A;color:#ffffff;border:none;} .form-button:hover{background:#146206;} </style> <div class="modal-header"> <a class="close" title="关闭小窗口" data-dismiss="modal">×</a> <h3>modal window<h3> </div> <div class="modal-body" style="padding-bottom: 5px;"> <div class="line"> <span class="left">脚本名称:</span> <span> <select name="name"> <option value='11'>11</option> <option value='22'>22</option> </select> </span> </div> <div class="line"> <span class="left">日期:</span> <span style="word-break:break-all;" title="的时间"> <input class="Wdate ipt date-picker" style="width: 100px;margin: 0;" type="text" id="date_add" value="" /> </span> </div> <div class="line" title="设置"> <span class="left">是否停止:</span> <span> <label><input type="radio" name="is_del_add" value="1" />强制停止</label> <label><input type="radio" name="is_del_add" value="0" />正常处理</label> </span> </div> <div class="line" title="按照实际情况允许进行模拟更改"> <span class="left">执行情况:</span> <span> <label><input type="radio" name="status_add" value="5" onclick="javascript:return confirm('你确定要操作该状态吗,这是系统的操作,请确认?');" />11</label> <label><input type="radio" name="status_add" value="1" onclick="javascript:return confirm('你确定要操作该状态吗,这是系统的操作,请确认?');" />22成</label> <label><input type="radio" onclick="javascript:return confirm('你确定要操作该状态吗,这是系统的操作,请确认?');" name="status_add" value="2"/>223行</label> <label><input type="radio" onclick="javascript:return confirm('你确定要操作该状态吗,这是系统的操作,请确认?');" name="status_add" value="0" />445</label> <label><input type="radio" onclick="javascript:return confirm('你确定要操作该状态吗,这是系统的操作,请确认?');" name="status_add" value="4" />55失败</label> </span> </div> <div class="line"> <span>操作说明:</span> <textarea name="memo" id="memo" cols="100" rows="1" style="width:370px;></textarea> </div> <div class="line" style="text-align:center;"> <input type="button" value="提交" class="form-button" id="submit2" /> <input type="hidden" id="id_add" value="22" /> </div> </div> <div class="modal-footer"> <span class="loading"></span> <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button> </div> <script src="/js/dragModal.js"></script> <script> $(function(){ $('#submit2').off().on('click', function(){ var status = $('input[name=status_add]:checked').val(), memo = $('#memo').val(), id = parseInt($('#id_add').val()), is_del = $('input[name=del_add]:checked').val(), cron_name = $('#name_add').val(), cron_date = $('#date_add').val(), url ='index.php?m=xx&c=xx&a='; if(!memo){ alert('请填写操作备注,如不处理,请直接关闭对话框!'); return false; } $.post(url, {status: status, cron_name:cron_name, memo: memo, id: id, cron_date: cron_date, is_del: is_del}, function(data){ if(data.status == 1){ alert(data.info); window.location.reload(); }else{ alert(data.info); } }, 'json') }); }); // drag effects begin, define the global variables to receive the changes,because of the different function of the modal dragModal('editModal'); </script>
4、添加拖动效果:
var clicked = "0"; var dif = {}; ;function dragModal(obj) { if(clicked == undefined || obj == undefined || dif == undefined){ return false; } if(typeof obj == 'string') { obj = new Array(obj); } var modalNums = obj.length; //drag effects begin var i = 0; for (i = 0; i < modalNums; i++) { dif[obj[i]] = {'difx': 0, 'dify': 0}; } $("html").off('mousemove').on('mousemove', function (event) { if (clicked == "0") { for (i = 0; i < modalNums; i++) { dif[obj[i]].difx = event.pageX - $("#" + obj[i]).offset().left; dif[obj[i]].dify = event.pageY - $("#" + obj[i]).offset().top; } } if (clicked > 0 && clicked <= modalNums) { var clickedObj = obj[clicked - 1]; var newx = event.pageX - dif[clickedObj].difx - $("#" + clickedObj).css("marginLeft").replace('px', ''); var newy = event.pageY - dif[clickedObj].dify - $("#" + clickedObj).css("marginTop").replace('px', ''); $("#" + clickedObj).css({top: newy, left: newx}); } }); $("html").off('mouseup').on('mouseup', function (event) { clicked = "0"; }); for(i = 0; i < modalNums; i++){ //注重此处不能直接传入i值,此处即为添加多窗口时的效果使用 $("#" + obj[i] + " .modal-header").off().on('mousedown',{index: i}, function (event) { clicked = event.data.index + 1; }); $("#" + obj[i] + " .modal-footer").off().on('mousedown', {index: i}, function (event) { clicked = event.data.index + 1; }); $('#' + obj[i]).on('hide.bs.modal', function () { //关闭时打开选中 $('html').off('selectstart').on('selectstart', function () { return true; }); }); } }
5、打开多个modal , 调用dragModal(new Array('modalId1','modalId2'));
整个过程即是如此,有需要的,就参考参考吧!
上一篇: jQuery操作基本控件方法实例分析
下一篇: js实现搜索框关键字智能匹配代码
相关文章
- 这篇文章主要介绍了Bootstrap Table使用整理(二)的相关资料,需要的朋友可以参考下...2017-06-15
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
这篇文章主要介绍了基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍 的相关资料,需要的朋友可以参考下...2016-05-14- 这篇文章主要为大家分享了Bootstrap教程JS插件滚动监听学习笔记,内容很详细,感兴趣的小伙伴们可以参考一下...2016-05-20
- 这篇文章主要教大家如何利用Bootstrap3制作图片轮播效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-05-14
- 这篇文章主要为大家详细解析了BootStrap栅格系统、表单样式与按钮样式源码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-01-23
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
这篇文章主要介绍了基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化的相关知识,主要对比说明在Bootstrap开发中用到的这些技术要点,对此文感兴趣的朋友一起学习吧...2016-05-14- 这篇文章主要为大家详细解析了BootStrap图片样式、辅助类样式和CSS组件源码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-01-23
- 在网页中,经常见到进度条效果,那么这些个性的进度条组件效果是怎么实现的呢,下面脚本之家小编给大家分享Bootstrap进度条组件知识详解,感兴趣的朋友要求学习吧...2016-05-04
JS树形菜单组件Bootstrap TreeView使用方法详解
这篇文章主要为大家详细介绍了js组件Bootstrap TreeView使用方法,本文一部分针对于bootstrap的treeview的实践,另一部分是介绍自己写的树形菜单,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-01-09- 这篇文章主要为大家详细介绍了Bootstrap选项卡学习笔记,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-02-19
- 这篇文章主要介绍了js实现div在页面拖动效果,涉及JavaScript动态操作页面元素与数值计算的相关技巧,需要的朋友可以参考下...2016-05-05
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
本文给大家介绍基于Metronic的Bootstrap开发框架实现页面链接收藏夹功能,非常不错,具有参考借鉴价值,感兴趣的朋友一起学习吧...2016-09-01基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
这篇文章主要介绍了基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)的相关资料,非常不错,需要的朋友可以参考下...2016-09-01- Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架,主要基于 HTML、CSS、JAVASCRIPT 的。接下来通过本文给大家介绍BootStrap 附加导航组件的知识,感兴趣的朋友一起学习吧...2016-07-29
- 这篇文章主要为大家详细介绍了Bootstrap树形控件使用方法,感兴趣的小伙伴们可以参考一下...2016-01-29
- 这篇文章主要介绍了BootStrap和jQuery相结合实现可编辑表格的相关资料,需要的朋友可以参考下...2016-04-23
- 这篇文章主要介绍了Bootstrap Table使用整理(四)之工具栏的相关资料,需要的朋友可以参考下...2017-06-15
BootStrap Progressbar 实现大文件上传的进度条的实例代码
这篇文章主要介绍了BootStrap Progressbar 实现大文件上传的进度条的实例代码的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2016-07-01- 本文通过实例代码给大家介绍了bootstrap导航条效果,代码简单易懂,非常不错,具有参考借鉴价值,需要的的朋友参考下吧...2017-05-22
- bootstrap布局是应用得很广泛的一种网页布局方法,下面通过本文给大家介绍bootstrap页面缩小变形的快速解决办法,需要的朋友参考下吧...2017-02-08