Bootstrap——可拖动模态框(Model)

还是上一个小项目,o(╥﹏╥)o,要实现点击一个div或者button或者一个东西然后可以弹出一个浮在最上面的弹框。网上找了找,发现Bootstrap的Model弹出框可以实现该功能,因此学习了一下,实现了基本弹框功能(可拖动)。

代码如下:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试</title><link href="./src/css/bootstrap.min.css" rel="stylesheet"><style>html,body{width: 100%;height: 100%;padding: 0;margin: 0;}.div_main{width: 100%;height: 100%;background: gray;}.bacstyle{/* background: red; */width: 1000px;height: 600px;}/*当触发模态框时会产生一个阴影层覆盖整个页面,设置 modal-backdrop 可以去除阴影层*/.modal-backdrop {filter: alpha(opacity=0)!important;opacity: 0!important;}</style></head><body><div class="div_main"><!-- botton按钮有两个属性是data-toggle="model"   data-target="#myModel";第一个属性代表我可以调取并展示一个模态框,第二个属性表示我要展示的哪一个模态框,用id来标识--><!-- data-backdrop="static"表示点击空白的地方不会关闭弹窗--><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-backdrop="static" >打开惊喜</button><!-- class = "modal",用来把 <div> 的内容识别为模态框  class = "fade",当模态框被切换时,它会引起内容淡入淡出--><!-- tabindex=-1代表此元素禁止使用键盘上的tab键对其导航,就是按tab键的时候,会跳过这个div    不设置tabindex的话,就会使Esc退出无效 --><!-- role=“dialog”代表这是一个对话框 --><!-- 属性 aria-hidden="true" 用于保持模态窗口不可见,直到触发器被触发为止(比如点击在相关的按钮上) --><div class="modal inmodal" id="myModal" role="dialog" aria-hidden="true"><div class="modal-dialog bacstyle"><div class="modal-content" style="width: 100%;height: 100%;"><!-- modal-header 是为模态窗口的头部定义样式的类 --><div class="modal-header" style="background: pink; width: 100%; height: 10%;"><!-- close 是一个 CSS class,用于为模态窗口的关闭按钮设置样式 --><!-- data-dismiss="modal",是一个自定义的 HTML5 data 属性,在这里它被用于关闭模态窗口 --><button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button><h4 class="modal-title">窗口标题</h4></div><!-- class="modal-body",是 Bootstrap CSS 的一个 CSS class,用于为模态窗口的主体设置样式 --><div class="modal-body" style="background: green; width: 100%; height: 90%;">湖人&&火箭总冠军</div></div></div></div><!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) --><script src="./src/js/jquery.min.js"></script><!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --><script src="./src/js/bootstrap.min.js"></script><script src="./src/js/jquery-ui.min.js"></script><script>// 在模态框出现后添加可拖拽功能
                $(document).on("show.bs.modal", ".modal", function() {// draggable 属性规定元素是否可拖动
                    $(this).draggable({handle: ".modal-header", // 只能点击头部拖动
                        cursor: 'move' //光标呈现为指示链接的指针(一只手),
                    });$(this).css("overflow", "hidden"); // 防止出现滚动条,出现的话,你会把滚动条一起拖着走的
                });</script></body>
</html>

点击按钮,会弹框显示,并且弹框可以拖动

运行效果如下:

注意:

Bootstrap为v3版本

相应的js插件网上都可以轻松下载

转载于:https://www.cnblogs.com/FHC1994/p/11318271.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/391833.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mfcc中的fft操作_简化音频数据:FFT,STFT和MFCC

mfcc中的fft操作What we should know about sound. Sound is produced when there’s an object that vibrates and those vibrations determine the oscillation of air molecules which creates an alternation of air pressure and this high pressure alternated with low …

PHP绘制3D图形

PEAR提供了Image_3D Package来创建3D图像。图像或光线在3D空间中按照X、Y 、Z 坐标定位。生成的图像将呈现在2D空间中&#xff0c;可以存储为 PNG、SVG 格式&#xff0c;或输出到Shell。通过Image_3D可以很方便生成一些简单的3D对象&#xff0c;例如立方体、锥体、球体、文本和…

r语言怎么以第二列绘制线图_用卫星图像绘制世界海岸线图-第二部分

r语言怎么以第二列绘制线图Part I of this blog series is here.本博客系列的第一部分 在这里 。 At the UKHO we are interested in the oceans, the seabed and the coastline — not to mention everything in and on them! In our previous blog, we (the UKHO Data Scien…

JSP基础--动作标签

JSP基础--动作标签 JSP动作标签 1 JSP动作标签概述 动作标签的作用是用来简化Java脚本的&#xff01; JSP动作标签是JavaWeb内置的动作标签&#xff0c;它们是已经定义好的动作标签&#xff0c;我们可以拿来直接使用。 如果JSP动作标签不够用时&#xff0c;还可以使用自定义标…

rcp rapido_Rapido使用数据改善乘车调度

rcp rapidoGiven our last blog post of the series, which can be found here :鉴于我们在该系列中的最后一篇博客文章&#xff0c;可以在这里找到&#xff1a; We thought it would be helpful to explain how we implemented all of the above into an on-ground experimen…

SSRS:之为用户“NT AUTHORITY\NETWORK SERVICE”授予的权限不足,无法执行此操作。 (rsAccessDenied)...

错误信息&#xff1a;为用户“NT AUTHORITY\NETWORK SERVICE”授予的权限不足&#xff0c;无法执行此操作。 (rsAccessDenied)如图&#xff1a;解决方案之检查顺序&#xff1a;1.检查报表的执行服务帐户。使用“ Reporting Services 配置管理器”。2.检查数据库安全 - 登录名 中…

飞机上的氧气面罩有什么用_第2部分—另一个面罩检测器……(

飞机上的氧气面罩有什么用This article is part of a series where I will be documenting my journey on the development of a social distancing feedback system for the blind as part of the OpenCV Spatial Competition. Check out the full series: Part 1, Part 2.本文…

经典网络流题目模板(P3376 + P2756 + P3381 : 最大流 + 二分图匹配 + 最小费用最大流)...

题目来源 P3376 【模板】网络最大流P2756 飞行员配对方案问题P3381 【模板】最小费用最大流最大流 最大流问题是网络流的经典类型之一&#xff0c;用处广泛&#xff0c;个人认为网络流问题最具特点的操作就是建反向边&#xff0c;这样相当于给了反悔的机会&#xff0c;不断地求…

数字经济的核心是对大数据_大数据崛起为数字世界的核心润滑剂

数字经济的核心是对大数据“Information is the oil of the 21st century, and analytics is the combustion engine”.“信息是21世纪的石油&#xff0c;分析是内燃机”。 — Peter Sondergaard, Senior Vice President of Gartner Research.— Gartner研究部高级副总裁Peter…

制作简单的WIFI干扰器

原教程链接:http://www.freebuf.com/geek/133161.htmlgithub 1.准备材料 制作需要的材料有 nodemcu开发版IIC通信 128*64 OLED液晶屏电线按钮开关万能板排针(自选)双面胶(自选)参考2.准备焊接 引脚焊接参考 oled按钮效果3.刷入固件 下载烧录工具:ESP8266Flasher.exe 下载固件:…

Snipaste截图

绘图绘色&#xff0c;描述加图片能更加说明问题的本质。今天推荐一款多功能的截图snipaste... 欣赏绘色 常见报错 解决方案&#xff1a; 下载相关的DLL即可解决&#xff0c; 请根据你操作系统的版本&#xff08;32位/64位&#xff09;&#xff0c;下载并安装相应的微软 Visual …

azure第一个月_MLOps:两个Azure管道的故事

azure第一个月Luuk van der Velden and Rik Jongerius卢克范德费尔登(Luuk van der Velden)和里克 琼格里乌斯( Rik Jongerius) 目标 (Goal) MLOps seeks to deliver fresh and reliable AI products through continuous integration, continuous training and continuous del…

VS2008 开发设计MOSS工作流 URN 注意了

最近学习MOSS 很苦恼&#xff0c;进度也很慢&#xff0c;最近在学习VS2008开发工作流&#xff0c;其中有结合INFOPATH 2007来做, 出现个BUG或者说是设置的问题,整整花了我一天工作时间&#xff0c;是这样的: 在部署的时候关于URN&#xff0c;大部分的教程都是这样的说的&#…

ArangoDB Foxx service 使用

备注&#xff1a;项目使用的是github https://github.com/arangodb-foxx/demo-hello-foxx1. git clonegit clone https://github.com/arangodb-foxx/demo-hello-foxx.git 2. 安装foxx servicefoxx-manager install demo-hello-foxx /demoapp 3. 效果自动生成的swagger 文档项目…

编译原理 数据流方程_数据科学中最可悲的方程式

编译原理 数据流方程重点 (Top highlight)Prepare a box of tissues! I’m about to drop a truth bomb about statistics and data science that’ll bring tears to your eyes.准备一盒纸巾&#xff01; 我将投放一本关于统计和数据科学的真相炸弹&#xff0c;这会让您眼泪汪…

iOS-FMDB

2019独角兽企业重金招聘Python工程师标准>>> #import <Foundation/Foundation.h> #import <FMDatabase.h> #import "MyModel.h"interface FMDBManager : NSObject {FMDatabase *_dataBase; }(instancetype)shareInstance;- (BOOL)insert:(MyM…

解决朋友圈压缩_朋友中最有趣的朋友[已解决]

解决朋友圈压缩We live in uncertain times.我们生活在不确定的时代。 We don’t know when we’re going back to school or the office. We don’t know when we’ll be able to sit inside at a restaurant. We don’t even know when we’ll be able to mosh at a Korn co…

MapServer应用开发平台示例

MapServer为当前开源WebGIS的应用代表&#xff0c;在西方社会应用面极为广泛&#xff0c;现介绍几个基于它的开源应用平台。 1.GeoMOOSE GeoMoose is a Web Client Javascript Framework for displaying distributed cartographic data. Among its many strengths, it can hand…

pymc3 贝叶斯线性回归_使用PyMC3进行贝叶斯媒体混合建模,带来乐趣和收益

pymc3 贝叶斯线性回归Michael Johns, Zhenyu Wang, Bruno Dupont, and Luca Fiaschi迈克尔约翰斯&#xff0c;王振宇&#xff0c;布鲁诺杜邦和卢卡菲亚斯基 “If you can’t measure it, you can’t manage it, or fix it”“如果无法衡量&#xff0c;就无法管理或修复它” –…

ols线性回归_普通最小二乘[OLS]方法使用于机器学习的简单线性回归变得容易

ols线性回归Hello Everyone!大家好&#xff01; I am super excited to be writing another article after a long time since my previous article was published.自从上一篇文章发表很长时间以来&#xff0c;我很高兴能写另一篇文章。 A Simple Linear Regression [SLR] is…