铁雪资源网 Design By www.gsvan.com

有时开发一些特效,自己感觉挺爽的,像操作自己电脑一样操作你的网页,这里就介绍一个使用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" 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') "htmlcode">
<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="/UploadFiles/2021-04-02/dragModal.js">
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实战教程

标签:
bootstrap,弹窗,拖动

铁雪资源网 Design By www.gsvan.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
铁雪资源网 Design By www.gsvan.com

评论“bootstrap实现弹窗和拖动效果”

暂无bootstrap实现弹窗和拖动效果的评论...

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?