使用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 相关文章推荐
整理8个很棒的 jQuery 倒计时插件和教程
Dec 12 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
Mar 06 Javascript
Js实现无刷新删除内容
Apr 29 Javascript
js实现遍历含有input的table实例
Dec 07 Javascript
深入理解JS中的substr和substring
Apr 26 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
Jul 27 Javascript
JavaScript寄生组合式继承实例详解
Jan 06 Javascript
详解如何构建一个Angular6的第三方npm包
Sep 07 Javascript
详解JavaScript中操作符和表达式
Sep 12 Javascript
详解webpack 热更新优化
Sep 13 Javascript
React学习之JSX与react事件实例分析
Jan 06 Javascript
vue-router中hash模式与history模式的区别
Jun 23 Vue.js
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 进程锁定问题分析研究
2009/11/24 PHP
PHP 将图片按创建时间进行分类存储的实现代码
2010/01/05 PHP
PHP调用Twitter的RSS的实现代码
2010/03/10 PHP
利用Ffmpeg获得flv视频缩略图和视频时间的代码
2011/09/15 PHP
PHP实现获取毫秒时间戳的方法【使用microtime()函数】
2019/03/01 PHP
laravel 验证错误信息到 blade模板的方法
2019/09/29 PHP
js获取图片长和宽度的代码
2009/11/24 Javascript
JavaScript中出现乱码的处理心得
2009/12/24 Javascript
javascript 同时在IE和FireFox获取KeyCode的代码
2010/02/07 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
2013/11/19 Javascript
Jquery实现图片预加载与延时加载的方法
2014/12/22 Javascript
jquery遍历json对象集合详解
2016/05/18 Javascript
浅析Bootstrap验证控件的使用
2016/06/23 Javascript
原生javascript上传图片带进度条【实例分享】
2017/04/06 Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
2018/04/13 Javascript
electron-vue利用webpack打包实现多页面的入口文件问题
2019/05/12 Javascript
bootstrap-table+treegrid实现树形表格
2019/07/26 Javascript
弱类型语言javascript中 a,b 的运算实例小结
2019/08/07 Javascript
vue中npm包全局安装和局部安装过程
2019/09/03 Javascript
Python中捕捉详细异常信息的代码示例
2014/09/18 Python
python实现获取客户机上指定文件并传输到服务器的方法
2015/03/16 Python
Python中操作mysql的pymysql模块详解
2016/09/13 Python
Python 基础知识之字符串处理
2017/01/06 Python
详解python单元测试框架unittest
2018/07/02 Python
Python 分享10个PyCharm技巧
2019/07/13 Python
Python xmltodict模块安装及代码实例
2020/10/05 Python
深入剖析HTML5 内联框架iFrame
2016/05/04 HTML / CSS
给水排水工程专业毕业生推荐信
2013/10/28 职场文书
元旦晚会邀请函
2014/02/01 职场文书
入学生会自荐书范文
2014/02/05 职场文书
买房委托公证书
2014/04/08 职场文书
捐助倡议书
2015/01/19 职场文书
教师工作决心书
2015/02/04 职场文书
花木兰观后感
2015/06/10 职场文书
公司庆典主持词
2015/07/04 职场文书
Python 数据结构之十大经典排序算法一文通关
2021/10/16 Python