<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 模态框操作的更多相关文章

  1. jQuery初识之选择器、样式操作和筛选器(模态框和菜单示例)

    一.jQuery 1.介绍 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架). jQuery设计的 ...

  2. bootstrap模态框传值操作

    1.bootstrap模态框之html代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"& ...

  3. bootstrap-table:操作栏点击编辑按钮弹出模态框修改数据

    核心代码: columns: [ { checkbox:true //第一列显示复选框 }, ... { field: 'fail_num', title: '失败数' }, { field: 'op ...

  4. bootstrap table编辑操作的时候 在模态框里加载iframe页面(加载的页面是在另一个页面做编辑)的时候如何关闭模态框和刷新table

    //关闭模态框                             window.parent.$('#myModal').modal('hide'); //修改成功后刷新table表格      ...

  5. JS及Dom练习 | 模态对话框及复选框操作

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 为Bootstrap Modal(模态框)全局添加拖拽操作

    在js中绑定方法 $(document).on("show.bs.modal", ".modal", function(){ $(this).draggable ...

  7. 使用RequireJs和Bootstrap模态框实现表单提交

    下面我将使用requirejs结合模态框实现三五行代码部署表单提交操作. 传统开发思路如下:

  8. Html中模态框(弹出框)使用入门

    作为html学习学习模态框需要二步: 效果图 第一步学习HTML中 div的弹出 ①触发按钮         <input class="btn btn-success" i ...

  9. Bootstrap3.0学习教程十七:JavaScript插件模态框

    这篇文章中我们主要来学习一下JavaScipt插件模态框.在学习模态框之前,我们先来了解一下JavaScript插件吧. JavaScript插件概览 插件可以单个引入(使用Bootstrap提供的单 ...

随机推荐

  1. SQL Server相似度比较函数

    原文:SQL Server相似度比较函数 相似度函数 概述    最近有人问到关于两个字段求相似度的函数,所以就写了一篇关于相似度的函数,分别是“简单的模糊匹配”,“顺序匹配”,“一对一位置匹配”.在 ...

  2. fatjar eclipse4.4 java项目的jar包一起打包 net.sf.fjep.fatjar_0.0.32.jar

    1.下载net.sf.fjep.fatjar_0.0.32.jar  http://files.cnblogs.com/files/milanmi/net.sf.fjep.fatjar_0.0.32. ...

  3. GitHub上整理

    GitHub上整理 技术站点 Hacker News:非常棒的针对编程的链接聚合网站 Programming reddit:同上 MSDN:微软相关的官方技术集中地,主要是文档类 infoq:企业级应 ...

  4. DDD分层架构之值对象(层超类型篇)

    DDD分层架构之值对象(层超类型篇) 上一篇介绍了值对象的基本概念,得到了一些朋友的支持,另外也有一些朋友提出了不同意见.这其实是很自然的事情,设计本来就充满了各种可能性,没有绝对正确的做法,只有更好 ...

  5. SQL点滴2—重温sql语句中的join操作

    原文:SQL点滴2-重温sql语句中的join操作 1.join语句 Sql join语句用来合并两个或多个表中的记录.ANSI标准SQL语句中有四种JOIN:INNER,OUTER,LEFTER,R ...

  6. 解决Postman发送post数据但是Node.js中req.body接收不到数据的问题[已解决]

    之前编写后台接口,测试数据都是使用的Postman,相当的方便,之前也一直使用get方法,编写Node.js一直没有问题,但是由于要编写一个注册/登陆的功能,所以发送的post数据,后台的逻辑已经编写 ...

  7. leetcode第36题--Sudoku Solver

    题目: Write a program to solve a Sudoku puzzle by filling the empty cells. Empty cells are indicated b ...

  8. ubuntu下的词典的安装

    因为从事开发,安装一个词典是很有必要,文中介绍安装openyoudao和stardic两个软件的方法 一.openyoudao的安装 因为是由window转来学ubuntu的,所以总是想安装和wind ...

  9. 动态注册HttpModule

    动态注册HttpModule 2014-06-05 08:58 by 汤姆大叔, 757 阅读, 4 评论, 收藏, 编辑 文章内容 通过前面的章节,我们知道HttpApplication在初始化的时 ...

  10. Android最新支持包Design简介

    Android 5.0 Lollipop是曾经最著名的Android发布之一,这样说很大一部分原因是材料设计的引入,而材料设计则是一种刷新了整个Android体验的设计语言.这个详细说明是开始适应材料 ...