使用bootstrap实现多窗口和拖动效果


Posted in Javascript onSeptember 22, 2016

有时开发一些特效,自己感觉挺爽的,像操作自己电脑一样操作你的网页,这里就介绍一个使用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'));

整个过程即是如此,有需要的,就参考参考吧!

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript实现焦点滚动图效果 具体方法
Jun 24 Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
Nov 28 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
Apr 18 Javascript
javascript实现依次输入input自动定焦
Dec 23 Javascript
JavaScript实现的简单幂函数实例
Apr 17 Javascript
jQuery下拉友情链接美化效果代码分享
Aug 26 Javascript
vue双向数据绑定原理探究(附demo)
Jan 17 Javascript
TableSort.js表格排序插件使用方法详解
Feb 10 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
Feb 27 Javascript
Vue 2.X的状态管理vuex记录详解
Mar 23 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
Aug 21 Javascript
解决Mac node版本升级失败的问题
May 16 Javascript
web 前端常用组件之Layer弹出层组件
Sep 22 #Javascript
值得分享的bootstrap table实例
Sep 22 #Javascript
第一次动手实现bootstrap table分页效果
Sep 22 #Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
Sep 22 #Javascript
Javascript从数组中随机取出不同元素的两种方法
Sep 22 #Javascript
JavaScript面试题大全(推荐)
Sep 22 #Javascript
JavaScript 是什么意思
Sep 22 #Javascript
You might like
PHP中的array数组类型分析说明
2010/07/27 PHP
Aster vs Newbee BO3 第二场2.18
2021/03/10 DOTA
jQuery选择头像并实时显示的代码
2010/06/27 Javascript
JavaScript实现快速排序的方法
2015/07/31 Javascript
js实现的简洁网页滑动tab菜单效果代码
2015/08/24 Javascript
javascript实现的登陆遮罩效果汇总
2015/11/09 Javascript
基于Node.js实现nodemailer邮件发送
2016/01/26 Javascript
JavaScript常用本地对象小结
2016/03/28 Javascript
javascript与jquery动态创建html元素示例
2016/07/25 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
2016/12/08 Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
2017/11/03 Javascript
Webpack优化配置缩小文件搜索范围
2017/12/25 Javascript
编写React组件项目实践分析
2018/03/04 Javascript
Vue实现兄弟组件间的联动效果
2020/01/21 Javascript
vue页面跳转实现页面缓存操作
2020/07/22 Javascript
[01:08:56]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第一场 2月7日
2021/03/11 DOTA
Python网络爬虫神器PyQuery的基本使用教程
2018/02/03 Python
python3 破解 geetest(极验)的滑块验证码功能
2018/02/24 Python
django允许外部访问的实例讲解
2018/05/14 Python
Python绘制KS曲线的实现方法
2018/08/13 Python
在双python下设置python3为默认的方法
2018/10/31 Python
Python图像处理实现两幅图像合成一幅图像的方法【测试可用】
2019/01/04 Python
Django中使用极验Geetest滑动验证码过程解析
2019/07/31 Python
简单了解Pandas缺失值处理方法
2019/11/16 Python
使用Keras画神经网络准确性图教程
2020/06/15 Python
python怎么对数字进行过滤
2020/07/05 Python
Django后端分离 使用element-ui文件上传方式
2020/07/12 Python
艺龙旅行网酒店预订:国内、港澳台酒店
2018/06/26 全球购物
什么是Oracle的后台进程background processes?都有哪些后台进程?
2012/04/26 面试题
如何提高MySql的安全性
2014/06/19 面试题
长辈证婚人证婚词
2014/01/09 职场文书
见习期自我鉴定
2014/01/31 职场文书
教师考核材料
2014/05/21 职场文书
财务稽核岗位职责
2015/04/13 职场文书
文明旅游倡议书
2015/04/28 职场文书
2015年教师学期工作总结
2015/04/30 职场文书