点击文字,弹出层

<!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-10-15 13:26:24

点击文字,弹出层的相关文章

点击文字弹出一个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:

jquery实现点击按钮弹出层和点击空白处隐藏层

昨天做项目遇到一个问题,和大家分享下,jquery实现点击按钮弹出层和点击空白处隐藏层的问题 if($('.autoBtn').length){                $('.autoBtn').find('.assess').unbind().bind('click',function(event){                    //取消事件冒泡                      event.stopPropagation(); if($('.abtnBox').is

Js浮动层插件,点击按钮弹出层,可关闭

<!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.org/1999/xhtml"> <head> <title>石家庄礼品公司</title>

前端学习代码实例-JavaScript点击按钮弹出层效果

强大的效果其实都是由一个个简单的功能组合而成的,下面介绍一下如何实现点击一个按钮弹出一个层的效果. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>web前端开发学习q群:73

点击文字弹出一个DIV层窗口代码 【或FORM表单 并且获取点击按钮的ID值】

点击不同按钮咨询不同的 专家 <?php for($i=1;$i<5;$i++){ $uid=$i; //用户ID ?> <a class="a_click" href="javascript:;" onclick="add_to_uid(<?=$uid?>)">点击弹框</a> <?}?> <div class="form1" id="form

js 点击 隐藏弹出层

document.onmousedown = function(e){ var ev = document.all ? window.event : e; var _con = $("#cicon"); // 设置目标区域 if(!_con.is(e.target) && _con.has(e.target).length === 0){ // Mark 1 if(!$("#cicon").is(":hidden")){ $(&q

js Ajax点击链接弹出一个DIV层窗口

下面是在实际项目中截取的部分代码,如果你想下载下来直接使用,可以点击这里点击文字弹出一个DIV层窗口代码. 效果图 HTML代码 <div class="cb pt10 mlf10"> <a href="__APP__/Article/chatpwd/value/7" onclick="verify(this);return false;" target="_blank" class="button

asp.net弹出层实例

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TestASPNetNewBlock._Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www

html DIV始终垂直居中的半透明弹出层特效源代码下载

html DIV始终垂直居中的半透明弹出层特效 原文:html Div层的展开与收缩的特效源代码下载 源代码下载地址:http://www.zuidaima.com/share/1550463332846592.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&g