代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .beijing {

            display: none;

            position: fixed;

            top: 0;

            right: 0;

            bottom: 0;

            left: 0;

            z-index: 1040;

            background-color: #000000;

            opacity: 0.8;

        }

        .registered{

            float: left;

            margin-top: 50px;

            margin-left: 400px;

            height: 100px;

            width: 300px;

            padding-top: 20px;

            padding-left: 10px;

            background-color: white;

        }

    </style>

</head>

<body>

    <div>

        <input type="button" value="登录" onclick="show()" />

        <div ID="bj" class="beijing">

            <div class="registered">

                username: <input type="text" /><br/>

                password: <input type="password" />

            </div>

        </div>

    </div>

    <script>

        function show() {

            obj = document.getElementById('bj');

            obj.style.display = "block"

        }

    </script>

</body>

</html>

效果图

web前端 - 模态对话框的更多相关文章

  1. web前端-----JAVA Script（一）

      JavaScript概述 JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase ...

  2. 15款基于 jQuery模态对话框

    在数字世界的竞争已大大增加.这就是为什么要确保网络设计的各个方面都是一流的,这是很重要的.从布局到一些非常小的东西,比如对话框,每一件都需要设计得很好.对话框通常被忽视,但它们可能对访问者有很大的影响 ...

  3. web前端基础知识-（七）Django进阶

    通过上节课的学习,我们已经对Django有了简单的了解,现在来深入了解下~ 1. 路由系统 1.1 单一路由对应 url(r'^index$', views.index), 1.2 基于正则的路由 u ...

  4. Web 前端开发精华文章集锦（jQuery、HTML5、CSS3）【系列十七】

    <Web 前端开发精华文章推荐>2013年第五期(总第十七期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...

  5. Web 前端开发人员和设计师必读精华文章【系列二十六】

    <Web 前端开发精华文章推荐>2014年第5期(总第26期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...

  6. Web 前端开发精华文章集锦（jQuery、HTML5、CSS3）【系列十八】

    <Web 前端开发精华文章推荐>2013年第六期(总第十八期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...

  7. web前端开发常用的10个高端CSS UI开源框架

    web前端开发常用的10个高端CSS UI开源框架   随着人们对体验的极致追求,web页面设计也面临着新的挑战,不仅需要更人性化的设计理念,还需要设计出更酷炫的页面.作为web前端开发人员,运用开源 ...

  8. web前端性能概述

    1.认识前端性能 不管你的网站设计的有多好,后端有多好,对于用户来说全部都是无感知的,用户只关心页面打开的速度,而前端性能表现很大程度上影响着用户的这种感知. 改善前端的性能对用户感知的整体性能提升有 ...

  9. web前端面试试题总结---javascript篇

    JavaScript 介绍js的基本数据类型. Undefined.Null.Boolean.Number.String. ECMAScript 2015 新增:Symbol(创建后独一无二且不可变的 ...

随机推荐

  1. NetAnalyzer笔记 之 四. C#版的抓包软件

    [创建时间:2015-09-10 22:37:04] NetAnalyzer下载地址 不好意思啊,NetAnalyzer停更有点长了,今天继续填坑^&^ NetAnalyzer实现结构 在上一 ...

  2. 【转】Devexpress使用之：GridControl控件（合并表头）

    Devexpress系列控件功能很强大,使用起来也不太容易,我也是边摸索边使用,如果有时间我会把常用控件的使用方法整理出来的. using System; using System.Collectio ...

  3. <!DOCTYPE html>的问题

    <!DOCTYPE> 声明必须位于 HTML5 文档中的第一行,也就是位于 <html> 标签之前.该标签告知浏览器文档所使用的 HTML 规范. doctype 声明不属于 ...

  4. Thread 常搞混的几个概念sleep、wait、yield、interrupt （转）

    原文网址:http://blog.csdn.net/partner4java/article/details/7993420sleep:在指定的毫秒数内让当前正在执行的线程休眠(暂停执行),此操作受到 ...

  5. asp.net 如何改变GridView搜索出来关键字的颜色？就像百度似的，我获得的是一个集合，改变集合中关键字的集合

    输入“产量”查询,将“产量”拆分,产.量 string strColNameCnDt = string.Empty;            for (int j = 0; j < dtTemp. ...

  6. sqlite编译

    1.下载代码:http://www.sqlite.org/download.html ,windows下下载sqlite-amalgamation-xxx.zip和sqlite-dll-win32-x ...

  7. memcached真实项目中的应用

    上一篇memcached介绍及基本使用介绍了memcached的一些基本概念和一个范例.这一篇将介绍一个memcached在实际项目中的应用

  8. myeclipse10 如何把代码预览的窗口去掉

    1,选择菜单: windows -> preferences2,在弹出窗口中选择General-> Editors -> FileAssociations3,在上方框内选择*.jsp ...

  9. 滚动页面时DIV到达顶部时固定在顶部

    本示例使用Javascript实现了滚动页面时,DIV到达顶部时固定在顶部.在IE下效果有点闪,效果网址:http://www.keleyi.com/keleyi/phtml/fixdiv.htm 下 ...

  10. iOS学习之界面间传值

    /** *  界面间传值步骤 1.界面传值第一种场场景:从前往后传值. 秘诀:属性传值.(葵花宝典). 招式:(1).在后一个界面定义属性,属性的类型和传出数据类型一致. (2).在进入下一界面之前, ...