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">
  <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实战教程

(0)

相关推荐

  • Bootstrap实现带动画过渡的弹出框

    先看看效果图: 代码: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>带动画过的渡弹出框</title> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css&quo

  • 简介BootStrap model弹出框的使用

    之前,我们讲解了bootstrap tab的使用,今天我们来了解下bootstrap 中model弹出窗的使用. 效果: 代码: <input id="btntext" type="button" value="添加文本组件" data-toggle="modal" data-target="#myModal" href="../SysManage/ZuJianManage.aspx&quo

  • 关于Bootstrap弹出框无法调用问题的解决办法

    问题描述 写项目中使用到了前端框架bootstrap,提供的功能很强大! bootstrap学习 然而在用bootstrap提供的弹出框组件时,弹出框怎么也弹不出! 按理说应该这样: 官方给出的样例是这样写的: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 弹出框(Popover)插件</title> <link href="http://libs.baidu.com/bo

  • Bootstrap弹出框(modal)垂直居中的问题及解决方案详解

    使用过bootstrap modal(模态框)组件的人都有一种困惑, 好好的一个弹出框怎么就无法垂直居中了呢?刚巧在做一个eit项目,由于此项目里面一些框架要遵循nttdata的一些规则,故用到了Bootstrap这个东东,第一次碰到这个东东,有很大抵触,觉得不好,但用起来我觉得和别的弹出框真没什么两样.废话少说,切入正题,Bootstrap弹出框垂直居中的问题,因为我拿到的弹出框样式并非垂直居中,而是top 10%,但页面长了,就显得特别恶心. 解决方案如下所示: 1.在css里,找到 .mo

  • Bootstrap教程JS插件弹出框学习笔记分享

    本文主要来学习一下JavaScript插件--弹出框. 案例 为页面内容添加一个小的覆盖层,就像iPad上的效果一样,为页面元素增加额外的信息. 先来看几个简单的静态案例效果图 效果比较简单主要就是静态的弹出的小窗体,分为窗体标题和窗体内容. <div class="bs-example bs-example-popover"> <div class="popover top"> <div class="arrow"

  • BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法

    弹出框(Popover)与工具提示(Tooltip)类似,提供了一个扩展的视图.如需激活弹出框,用户只需把鼠标悬停在元素上即可.弹出框的内容完全可使用 Bootstrap 数据 API(Bootstrap Data API)来填充.该方法依赖于工具提示(tooltip). 1 设置延时, 超过该延时未移入弹窗则弹窗隐藏 Tooltip.prototype.init = function{中的 var triggers = this.options.trigger.split(' ')后面加上 /

  • Bootstrap每天必学之弹出框(Popover)插件

    Bootstrap弹出框插件,提供了一个扩展的视图,弹出框(Popover)插件根据需求生成内容和标记,默认情况下是把弹出框(popover)放在它们的触发元素后面. 弹出框(Popover)与工具提示(Tooltip)类似,提供了一个扩展的视图.如需激活弹出框,用户只需把鼠标悬停在元素上即可.弹出框的内容完全可使用 Bootstrap 数据 API(Bootstrap Data API)来填充.该方法依赖于工具提示(tooltip). 如果您想要单独引用该插件的功能,那么您需要引用 popov

  • JS组件Bootstrap实现弹出框和提示框效果代码

    前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的系统有一个友好的弹出提示框,自然能给用户很好的页面体验.前面几章介绍了bootstrap的几个常用组件,这章来看看bootstrap里面弹出框和提示框的处理.总的来说,弹出提示主要分为三种:弹出框.确定取消提示框.信息提示框.本篇就结合这三种类型分别来介绍下它们的使用. 一.Bootstrap弹出框

  • BootStrap初学者对弹出框和进度条的使用感觉

    Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. bootstrap 框架提供的进度条,如菜鸟教程里面的这些代码 <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60&qu

  • JS组件Bootstrap实现弹出框效果代码

    为页面内容添加一个小的覆盖层,就像iPad上的效果一样,为页面元素增加额外的信息. 插件依赖 弹出框依赖工具提示插件,因此需要先加载工具提示插件. 选择性加入的功能 出于性能方面的考虑,工具提示和弹框组件的data属性api是选择性加入的,也就是说你必须自己初始化他们. 弹出框在按钮组和输入框组中使用时,需要额外的设置 当提示框与.btn-group 或 .input-group联合使用时,你需要指定container: 'body'选项(见下面的文档)以避免不需要的副作用(例如,当弹出框显示之

随机推荐