bootstrap实现弹窗和拖动效果


Posted in Javascript onJanuary 03, 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匿名函数
Nov 25 Javascript
chrome原生方法之数组
Nov 30 Javascript
jQuery之折叠面板的深入解析
Jun 19 Javascript
js实现鼠标经过表格行变色的方法
May 12 Javascript
用svg制作富有动态的tooltip
Jul 17 Javascript
AngularJS中的包含详细介绍及实现示例
Jul 28 Javascript
利用原生JS自动生成文章标题树的实例
Aug 22 Javascript
angular实现spa单页面应用实例
Jul 10 Javascript
Vue项目中设置背景图片方法
Feb 21 Javascript
AngularJS修改model值时,显示内容不变的实例
Sep 13 Javascript
jquery分页插件pagination使用教程
Oct 23 jQuery
解决await在forEach中不起作用的问题
Feb 25 Javascript
基于javascript实现窗口抖动效果
Jan 03 #Javascript
理解jquery事件冒泡
Jan 03 #Javascript
实例讲解避免javascript冲突的方法
Jan 03 #Javascript
详解js中class的多种函数封装方法
Jan 03 #Javascript
js中利用tagname和id获取元素的方法
Jan 03 #Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
Jan 03 #Javascript
基于javascript实现简单计算器功能
Jan 03 #Javascript
You might like
简单的PHP缓存设计实现代码
2011/09/30 PHP
微信开发之php表单微信中自动提交两次问题解决办法
2017/01/08 PHP
ThinkPHP实现登录退出功能
2017/06/29 PHP
PHP中散列密码的安全性分析
2019/07/26 PHP
javascript编程起步(第四课)
2007/01/10 Javascript
Jquery Validation插件防止重复提交表单的解决方法
2010/03/05 Javascript
JavaScript 滚轮事件使用说明
2010/03/07 Javascript
兼容IE与firefox火狐的回车事件(js与jquery)
2010/10/20 Javascript
解析img图片没找到onerror事件 Stack overflow at line: 0
2013/12/23 Javascript
javaScript如何处理从java后台返回的list
2014/04/24 Javascript
node.js中的http.response.getHeader方法使用说明
2014/12/14 Javascript
小议JavaScript中Generator和Iterator的使用
2015/07/29 Javascript
Vue.js基础知识小结
2017/01/13 Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
2017/01/21 Javascript
jQuery动态追加页面数据以及事件委托详解
2017/05/06 jQuery
JS实现留言板功能
2017/06/17 Javascript
Angular.JS中指令ng-if的注意事项小结
2017/06/21 Javascript
Three.js实现绘制字体模型示例代码
2017/09/26 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
2018/01/22 Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
2018/02/01 Javascript
JS实现方形抽奖效果
2018/08/27 Javascript
webpack之引入图片的实现及问题
2018/10/08 Javascript
vue使用Google地图的实现示例代码
2018/12/19 Javascript
python在windows下创建隐藏窗口子进程的方法
2015/06/04 Python
python爬虫_微信公众号推送信息爬取的实例
2017/10/23 Python
numpy中实现二维数组按照某列、某行排序的方法
2018/04/04 Python
Keras框架中的epoch、bacth、batch size、iteration使用介绍
2020/06/10 Python
python中lower函数实现方法及用法讲解
2020/12/23 Python
使用CSS3实现input多选框自定义样式的方法示例
2019/07/19 HTML / CSS
微信小程序“圣诞帽”的实现思路详解
2017/12/28 HTML / CSS
canvas线条的属性详解
2018/03/27 HTML / CSS
新加坡领先的在线生活方式和杂货购物网站:EAMART
2019/04/02 全球购物
户外拓展活动方案
2014/02/11 职场文书
小学教师自我鉴定范文
2014/03/20 职场文书
2015年建党94周年演讲稿
2015/03/19 职场文书
如何理解python接口自动化之logging日志模块
2021/06/15 Python