采用bootstrap完毕多窗口和拖动作效果果,bootstrap完结弹窗和拖动作效果果

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> <!-- 打开容器 -->  

bootstrap实现弹窗和拖动效果,bootstrap弹窗拖动

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

   <select name="name">
  <option value='11'>11</option>
   <option value='22'>22</option>
    </select>

  </div>
  <div class="line">
    日期:

      <input class="Wdate ipt date-picker" style="width: 100px;margin: 0;" type="text" id="date_add" value="" />

  </div>
  <div class="line" title="设置">
    是否停止:

      <label><input type="radio" name="is_del_add" value="1" />强制停止</label>
      <label><input type="radio" name="is_del_add" value="0" />正常处理</label>

  </div>
  <div class="line" title="按照实际情况允许进行模拟更改">
    执行情况:

      <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>

  </div>
  <div class="line">
    操作说明:
    <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">

  <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’));

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

//打开弹窗
 $('.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中间内容:

您可能感兴趣的文章:

  • js退出弹窗代码集合
  • js 右下角弹窗效果代码(IE only)
  • js弹窗代码 可以指定弹出间隔
  • js点击弹出div层实现可拖曳的弹窗效果
  • 原生JS可拖动弹窗效果实例代码
  • js弹窗返回值详解(window.open方式)
  • 全面解析Bootstrap弹窗的实现方法

有时开发一些特效,自己感觉挺爽的,像操作自己电脑一样操作你的网页,这里就介绍一个使…

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

<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">
  脚本名称:

  <select name="name">
 <option value='11'>11</option>
  <option value='22'>22</option>
  </select>

 </div>
 <div class="line">
  日期:

   <input class="Wdate ipt date-picker" style="width: 100px;margin: 0;" type="text" id="date_add" value="" />

 </div>
 <div class="line" title="设置">
  是否停止:

   <label><input type="radio" name="is_del_add" value="1" />强制停止</label>
   <label><input type="radio" name="is_del_add" value="0" />正常处理</label>

 </div>
 <div class="line" title="按照实际情况允许进行模拟更改">
  执行情况:

   <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>

 </div>
 <div class="line">
  操作说明:
  <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">

 <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> 

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

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;
   });
  });

 }
}

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

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

3、编写modal中间内容: 

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

有时开发一些特效,自己感觉挺爽的,像操作自己电脑一样操作你的网页,这里就介绍一个使用bootstrap的一点多窗口和拖动效果吧!

5、打开多个modal , 调用dragModal(new Array(‘modalId1′,’modalId2’));

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;

 });
 });

 }

} 

4、添加拖动效果:

这里,我们不使用静态打开的的方式,low…,1、添加一个a链接
触发,打开按钮;2、编写动态打开js脚本;
3、编写modal中间内容;4、添加拖动效果;5、打开多个modal ,
调用dragModal(new Array(‘modalId1′,’modalId2’));

//打开弹窗
 $('.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'); 
<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">
 脚本名称:

 <select name="name">
 <option value='11'>11</option>
 <option value='22'>22</option>
 </select>

 </div>

 <div class="line">
 日期:

 <input class="Wdate ipt date-picker" style="width: 100px;margin: 0;" type="text" id="date_add" value="" />

 </div>
 <div class="line" title="设置">
 是否停止:

 <label><input type="radio" name="is_del_add" value="1" />强制停止</label>
 <label><input type="radio" name="is_del_add" value="0" />正常处理</label>

 </div>
 <div class="line" title="按照实际情况允许进行模拟更改">
 执行情况:

 <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>

 </div>

 <div class="line">
 操作说明:
 <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">

 <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>

1、添加一个a链接 触发,打开按钮:

2、编写动态打开js脚本: 

您可能感兴趣的文章:

  • 基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
  • Bootstrap的modal拖动效果
  • 使用bootstrap实现多窗口和拖动效果
  • Bootstrap
    Table列宽拖动的方法

   

2、编写动态打开js脚本:

5、打开多个modal , 调用dragModal(new Array(‘modalId1′,’modalId2’));

这里,我们不使用静态打开的的方式,low…,1、添加一个a链接
触发,打开按钮;2、编写动态打开js脚本;
3、编写modal中间内容;4、添加拖动效果;5、打开多个modal ,
调用dragModal(new Array(‘modalId1′,’modalId2’));

<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> <!-- 打开容器 --> 

有时开发一些特效,自己感觉挺爽的,像操作自己电脑一样操作你的网页,这里就介绍一个使用bootstrap的一点多窗口和拖动效果吧!

您可能感兴趣的文章:

  • 基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
  • Bootstrap的modal拖动效果
  • bootstrap实现弹窗和拖动效果
  • Bootstrap
    Table列宽拖动的方法

4、添加拖动效果: