html弹出div弹窗

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>点击文字弹出一个DIV层窗口代码</title>
        <style>
        .black_overlay{
            display: none;
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: black;
            z-index:1001;
            -moz-opacity: 0.8;
            opacity:.80;
            filter: alpha(opacity=88);
        }
        .white_content {
            display: none;
            position: absolute;
            top: 25%;
            left: 25%;
            width: 55%;
            height: 55%;
            padding: 20px;
            border: 10px solid orange;
            background-color: white;
            z-index:1002;
            overflow: auto;
        }
    </style>
    </head>
    <body>
        <p>示例弹出层：　　　　<a href = "javascript:void(0)"onclick = "document.getElementById(‘light‘).style.display=‘block‘;document.getElementById(‘fade‘).style.display=‘block‘">请点这里</a>　　　　 </p>
        <div id="light" class="white_content">　　　　这是一个层窗口示例程序.<a href = "javascript:void(0)" onclick = "document.getElementById(‘light‘).style.display=‘none‘;document.getElementById(‘fade‘).style.display=‘none‘">点这里关闭本窗口　　　　　　</a>　　　　　</div>
        <div id="fade" class="black_overlay"></div>
    </body>
</html>

时间： 2024-07-30 13:45:58

html弹出div弹窗的相关文章

js弹窗 js弹出DIV,并使整个页面背景变暗

1.首先写一个遮罩层div,然后再写一个弹窗的div  <div id="cover" style="background: #000; position: absolute; left: 0px; top: 0px; width: 100%; filter: alpha(opacity=30); opacity: 0.3; display: none; z-index: 2 "> </div> <!

创建一个弹出DIV窗口

创建一个弹出DIV窗口摘自: http://www.cnblogs.com/TivonStone/archive/2012/03/20/2407919.html 创建一个弹出DIV窗口可能是现在网站/网页制作中最常碰到的问题之一.传统的 JavaScript弹窗已经不适合目前网站的设计理念了,理由有二:首先,不友好——生硬的弹出对话框且伴随着“哐”的一声对用户体验是个很大的挑战: 其次,兼容性不够强——有相当多的浏览器屏蔽了这种JS的Alert()方法.于是,一个良好用户体验的网站需要一种

JavaScript总结之鼠标划过弹出div单击出现对话框

为了满足他们的永无止境的要求,我可谓是任劳任怨啊,累断了双手,看瞎了双眼.这个是来写鼠标划过一个按钮,然后弹出一个小提示框解释,另外根据radio是否选中,判断点击后如何执行,然后执行之后再有一个确认或取消.其实部分想要的功能可以从中截取. js代码: 1 <script type="text/javascript"> 2 function sAlert_jobdel(str){ 3 var msgw,msgh,bordercolor; 4 msgw=400;//提示窗口的

JavaScript总结之单击弹出div

今天也算用了不少手段来实现他们的要求,大概记录一下,下边的代码示例,我全部修改贴出来,争取全部占到自己的代码里就能用. 1.点击同一个div,打开/关闭另一个div. 1 1 <script type="text/javascript" src="jquery-1.11.1.min.js"></script> 2 2 <script type="text/javascript"> 3 3 /*var btnSh

Jquery实现遮罩层，就是弹出DIV周围都灰色不能操作

<%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3

如何在一堆框架（Frame）上弹出div层【转载】

框架Frame,不知道现在还有多少人会用,至少我学用html到现在,只是知道有这种东西存在,却没见到也没用到过.上周终于碰到个机会让我一窥框架是个啥东西,然后由于项目的需要,我得做个div层置于所有的框架之上,做成下拉菜单的效果.折腾了一下,就记在这里吧. 第一个DEMO展示的是框架,点击这里查看. 用框架来布局这种后台管理类的界面,结构上非常清晰,维护上也应该比较方便,因为每个框架里展示的页面是独立的.但是在一堆frameset和frame上要浮动起一个div层来,我试了一下,基本上行不通.当

工作当中实际运用（3）——js原生实现鼠标点击弹出div层在点击隐藏

function onmou(){ var divs=document.getElementById('kefuDV');//获取到你要操作的div if (divs.style.display=="none") {//下面就简单了不一一赘述了 divs.style.display="block" }else{ divs.style.display="none" } } js原生代码实现鼠标点击弹出隐藏 div隐藏

前端小结（3）---- 添加遮罩层，并弹出div

有如下div: <div id='pop-div' class="pop-box"> <div class="input-group has-info"> <input class="form-control" id="bankCode" type="text" placeholder="请输入银行卡号" /> <span class="

js 弹出div窗口可移动可关闭

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title&