Html 模态框操作
<style>
#modal-overlay {
visibility: hidden;
position: absolute; /* 使用绝对定位或固定定位 */
left: 0px;
top: 0px;
width:50%;
height:26%;
text-align:center;
z-index: 1000;
background-color: #333;
opacity: 1; /* 背景半透明 */
margin-top: 10%;
margin-left: 25%;
}
/* 模态框样式 */
.modal-data{
width:100%;
height:100%;
/*margin: 100px auto;*/
background-color: #fff;
border:1px solid #000;
padding:15px;
text-align:center;
}
</style>
<script>
function overlay() {
var e1 = document.getElementById('modal-overlay');
e1.style.visibility = (e1.style.visibility == "visible") ? "hidden" : "visible";
}
</script>
<div id="modal-overlay">
<div class="modal-data">
<p>这是一个简单的模态框</p>
<p>
<a href="Javascript: void(0)" onclick="overlay">关闭模态框</a>
</p> </div>
</div>
欢迎评论。。。。让我看到你的反馈。。。。
Html 模态框操作的更多相关文章
- jQuery初识之选择器、样式操作和筛选器(模态框和菜单示例)
一.jQuery 1.介绍 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架). jQuery设计的 ...
- bootstrap模态框传值操作
1.bootstrap模态框之html代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"& ...
- bootstrap-table:操作栏点击编辑按钮弹出模态框修改数据
核心代码: columns: [ { checkbox:true //第一列显示复选框 }, ... { field: 'fail_num', title: '失败数' }, { field: 'op ...
- bootstrap table编辑操作的时候 在模态框里加载iframe页面(加载的页面是在另一个页面做编辑)的时候如何关闭模态框和刷新table
//关闭模态框 window.parent.$('#myModal').modal('hide'); //修改成功后刷新table表格 ...
- JS及Dom练习 | 模态对话框及复选框操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 为Bootstrap Modal(模态框)全局添加拖拽操作
在js中绑定方法 $(document).on("show.bs.modal", ".modal", function(){ $(this).draggable ...
- 使用RequireJs和Bootstrap模态框实现表单提交
下面我将使用requirejs结合模态框实现三五行代码部署表单提交操作. 传统开发思路如下:
- Html中模态框(弹出框)使用入门
作为html学习学习模态框需要二步: 效果图 第一步学习HTML中 div的弹出 ①触发按钮 <input class="btn btn-success" i ...
- Bootstrap3.0学习教程十七:JavaScript插件模态框
这篇文章中我们主要来学习一下JavaScipt插件模态框.在学习模态框之前,我们先来了解一下JavaScript插件吧. JavaScript插件概览 插件可以单个引入(使用Bootstrap提供的单 ...
随机推荐
- three.js 源代码凝视(七)Math/Euler.js
商域无疆 (http://blog.csdn.net/omni360/) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载请保留此句:商域无疆 - 本博客专注于 敏捷开发 ...
- C# 标签(条码)
C# 标签(条码) 上一篇说到条码的打印,主要是通过读取模板定义文件(XML文件),然后结合从数据库中读取的动态数据结合而产生条码.下面主要说一下如何设计这个条码模板.设计过程也很简单,只需要简单的拖 ...
- Android从无知到有知——NO.4
因为我们做的是手机安全卫士,因此,我们需要一个地图定位功能,些相关的项目,也有一些教程.到百度官方下载了相关的jar包和API,但自己建项目的时候却不是那么顺利,bug不断,弄得心烦意乱,最后最终臣服 ...
- [译]Java 设计模式之单例
(文章翻译自Java Design Pattern: Singleton) 单例是在Java最经常被用到的设计模式.它通过阻止其他的实例化和修改来用于控制创建对象的数目.这一特性可应用于那些当只有一个 ...
- .NET简单企业应用
<.NET简单企业应用>项目开发环境 项目开始,开发团队需要构建一套开发环境,主要包含:开发工具.代码管理/版本控制系统.任务和Bug管理系统和持续集成(CI)系统.本文主要列举项目开发中 ...
- android shape总结 和控制的风格定制
1:shape总结 1):shape文件是放置在drawable文件下的.res/drawable/filename.xml. 2):shape类型:android:shape. 一共同拥有四种:re ...
- Unit of work + Repository
(Unit of work + Repository) 今日后开启进阶模式! 谈到MVC与EntityFramework,则不得不说一说事务与仓储(Unit of work + Repository) ...
- 用 MVC 5 的 EF6 Code First 入门 系列:MVC程序中实体框架的Code First迁移和部署
用 MVC 5 的 EF6 Code First 入门 系列:MVC程序中实体框架的Code First迁移和部署 这是微软官方SignalR 2.0教程Getting Started with En ...
- 简化MonoTouch.Dialog的使用
读了一位园友写的使用MonoTouch.Dialog简化iOS界面开发,我来做个补充: 相信使用过DialogViewController(以下简称DVC)的同学都知道它的强大,但是缺点也是明显的,应 ...
- GitHub 简易使用
笔记内容 学习笔记-段玉磊 Github Github 命令 写这篇文章主要写一下如何运用终端命令,进行Git的配置以及使用,由于本人我不太习惯使用图形IDE,效率没有命令行高,我还是推荐使用命令行进 ...