使用简单的html+css+javacsript实现dialog功能

转载 2015年07月08日 16:54:43

直接上代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>简单的html+css+javascript实现对话框</title>
	
</head>
<body>
	<div><input type="button" onclick="overlay()" value="显示dialog" /></div>
	<div id="modal-overlay"> 
	    <div class="modal-data">     
	        <p>一个很简单的模态对话框 </p>
	        <p>点击<a onclick="overlay()" href="">这里</a>关闭</p>
	    </div>
	</div>
	<style>
	  /* 定义模态对话框外面的覆盖层样式 */
        #modal-overlay {
             visibility: hidden;    
             position: absolute;   /* 使用绝对定位或固定定位  */
             left: 0px;    
             top: 0px;
             width:100%;
             height:100%;
             text-align:center;
             z-index: 1000;
             background-color: #333; 
             opacity: 0.5;   /* 背景半透明 */
        }
        /* 模态框样式 */
        .modal-data{
             width:300px;
             margin: 100px auto;
             background-color: #fff;
             border:1px solid #000;
             padding:15px;
             text-align:center;
        }
</style>
<script typt="text/javascript">
	function overlay(){
    var e1 = document.getElementById('modal-overlay');           
    e1.style.visibility =  (e1.style.visibility == "visible"  ) ? "hidden" : "visible";
}
</script>
</body>
</html>


Android自定义Dialog简单实例

做Android应用中,最缺少不了的就是自定义Dialog,对于系统默认提供的Dialog样式,一般都不复合我们应用的样式。 自定义Dialog需要3步骤即可: 1、主要的重写Dialog的Jav...
  • catoop
  • catoop
  • 2015年12月04日 16:55
  • 10166

Android 简单的自定义Dialog

效果图 Dialog的详细用法看这篇博客:http://blog.csdn.net/zhuwentao2150/article/details/51478053我们自定义的CustomDialog是...
  • zhuwentao2150
  • zhuwentao2150
  • 2016年08月19日 23:25
  • 3490

android沉浸式简单实现

沉浸式的布局就是一个EditText用来测试,点击后监听显示方法getWindow().getDecorView().setOnSystemUiVisibilityChangeListener(thi...
  • WuChuangON
  • WuChuangON
  • 2017年06月14日 11:03
  • 253

Python实现简单爬虫功能

在我们日常上网浏览网页的时候,经常会看到一些好看的图片,我们就希望把这些图片保存下载,或者用户用来做桌面壁纸,或者用来做设计的素材。...
  • qq_37267015
  • qq_37267015
  • 2017年05月06日 14:08
  • 908

<转> 主流蓝牙BLE控制芯片详解(5):Dialog DA14580

[导读] Dialog推出的号称全球功率最低、体积最小的SmartBond DA14580蓝牙智能系统级芯片(SoC),与竞争方案相比,该产品可将搭载应用的智能型手机配件,或计算机周边商品的电池巡航时...
  • ji5ji
  • ji5ji
  • 2015年09月22日 14:47
  • 2979

JSP练习之简单计算器(使用jsp+javabean模式)

JSP案例之实现一个功能简单的计算器小程序
  • qq791967024
  • qq791967024
  • 2015年01月28日 17:57
  • 2225

AlertDialog基本用法详解

转载请注明出处:http://blog.csdn.net/u012572172/article/details/40455597 AlertDialog简单介绍:        Alert...
  • u012572172
  • u012572172
  • 2014年10月26日 00:07
  • 1710

Android中的几种简单小功能实现

自动提醒的设置 根据所输入的内容自动显示出所有相关的提示信息 Step1:在布局文件中定义AutoCompleteTextView           ...
  • u013721164
  • u013721164
  • 2014年03月08日 23:04
  • 860

AndroidUI之三分钟教你实现效果简单大气的Dialog提示框

在项目当中不可以避免会使用一些自定义的提示框,如下图所示: 个人感觉这个还不错,,,全屏显示,,, 下面,让我们一起学习,如何实现当前效果。。。实现思路如下: 1. 首先自定义一个dialog类...
  • u012400885
  • u012400885
  • 2016年04月19日 15:17
  • 618

7种形式的Android Dialog使用举例

在Android开发中,我们经常会需要在Android界面上弹出一些对话框,比如询问用户或者让用户选择。这些功能我们叫它Android Dialog对话框,在我们使用Android的过程中,我归纳了一...
  • qq457163027
  • qq457163027
  • 2016年04月19日 17:39
  • 532
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用简单的html+css+javacsript实现dialog功能
举报原因:
原因补充:

(最多只允许输入30个字)