使用div和js脚本弹出对话框_js 弹出div对话框-程序员宅基地

技术标签: 脚本  控件  对话框  class  javascript  

使用div和js脚本弹出对话框


思路:div已经存在于网页当中,只是被隐藏了,当点击按钮时将其可见性设置为可见即可实现

实现:在网页中设置好需要弹出的窗口,为其他控件设置一个事件,当触发该事件时将窗口设置为可见

  • 控件
<body class="bg" id="bg">
<!--窗口-->
<div class="div1" id="div1">
    <div id="div2" class="div2">
        <div class="divtitle" id="divtitle">
            <span class="title">欢迎使用</span>
            <a class="closeimg" href="javascript:dispear()">x</a>
        </div>
        <img class="img" src="img/MyWechat.png">
    </div>
</div>
<!--按钮-->
<table style="margin: auto;text-align: center;width: 100%">
    <tr>
        <td>
            <button onmouseover="show()" onmouseleave="dispear()" class="btn">获得焦点显示窗口</button>
        </td>
    </tr>
    <tr>
        <td>
            <button onclick="show()" class="btn">点击显示窗口</button>
        </td>
    </tr>
</table>
</body>
  • script 脚本
<script>
    //使窗口位置居中
    window.onresize = window.onload = window.onscroll = function () {
        center("div1");
        center("div2");
        center("divtitle")
    };
    function center(obj) {
        var div = document.getElementById(obj);
        div.style.top = (document.documentElement.clientHeight - div.offsetHeight) / 2 + "px";
        div.style.left = (document.documentElement.clientWidth - div.offsetWidth) / 2 + "px";
    }

    //显示窗口
    function show() {
        var div = document.getElementById("div1");
        var bg = document.getElementById("bg");
        bg.style.backgroundColor = "#ddd";
        bg.style.opacity = "0.9";
        div.style.visibility = "visible";
    }
    //隐藏窗口
    function dispear() {
        var div = document.getElementById("div1");
        var bg = document.getElementById("bg");
        bg.style.backgroundColor = "#fff";
        div.style.visibility = "hidden";
    }
</script>
  • css样式
<style type="text/css">
    .bg {
        width: 100%;
        height: 100%;
    }

    .div1 {
        visibility: hidden
    }

    .div2 {
        position: absolute;
        width: 300px;
        height: 350px;
        top: 40px;
        z-index: 2000;
        background-color: rgba(0, 0, 0, 0.1);
        border: 5px solid #ddd;
        opacity: 30
    }

    .divtitle {
        background-color: #f7f7f7;
    }

    .title {
        background: #f7f7f7;
        padding: 0px 20px;
        line-height: 50px;
        height: 40px;
        font-weight: bold;
        color: #666;
        font-size: 20px;
    }

    .closeimg {
        font-family: "Microsoft YaHei UI";
        font-size: 30px;
        color: #999;
        text-decoration: none;
        float: right;
        padding-right: 20px;
        line-height: 40px;
    }

    .img {
        width: 300px;
        height: 300px;
    }

    .btn {
        width: 300px;
        color: white;
        background: #4490f7;
        text-decoration: none;
        padding: 10px 95px;
        border-radius: 5px;
        font-family: "Microsoft YaHei UI";
    }
</style>

演示链接

源码下载

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/u013360850/article/details/52900917

智能推荐

Android原生权限管理AppOps,安卓应用推荐:App Ops - 专治不给权限就不运行类软件...-程序员宅基地

文章浏览阅读812次。IT之家1月18日消息 相较于iOS软件,部分安卓应用在本来需求的权限之外还经常请求一些较为敏感的权限,例如通话、付费短信等,虽然部分软件也解释是为了增强用户使用的安全性和体验,但是对一部分喜欢保护个人隐私的用户来说还是有所疑虑。如果你也对一部分应用弹出的不相关权限请求不爽,现在治理它们有了新的方法,就是这款名为App Ops的软件,对于安卓7.0以上的系统该软件还支持后台运行,能够让应用在索要权...

keras、tensorflow与numpy版本对应问题_tensorflow和numpy对应关系-程序员宅基地

文章浏览阅读3.3w次,点赞3次,收藏51次。1、keras、tensorflow版本对应问题可以看这个:https://docs.floydhub.com/guides/environments/部分截图:2、numpy的版本问题像这样:FutureWarning: Passing (type, 1) or '1type' as a synonym of type is deprecat就是numpy版本的..._tensorflow和numpy对应关系

Android OTA 升级之三:生成recovery.img_recovery.img的生成-程序员宅基地

文章浏览阅读3.7w次。得到了ota升级包后,我们就可以用它来升级系统了。Android 手机开机后,会先运行 bootloader。 Bootloader 会根据某些判定条件(比如按某个特殊键)决定是否进入 recovery 模式。Recovery 模式会装载 recovery 分区, 该分区包含recovery.img。recovery.img 包含了标准内核(和boot.img中的内核相同)以及recovery 根文件系统。下面我们看一下它是如何生成的。_recovery.img的生成

网络安全-技术与实践 书本习题练习_预言者会话攻击-程序员宅基地

文章浏览阅读4w次,点赞67次,收藏399次。网络安全基础第一章 引言填空题1.信息安全的三个基本目标是(),此外,还有一个不可忽视的目标是()​ 保密性、完整性、可用性;合法使用。2.网络中存在的四种基本安全威胁有()​ 信息泄露、完整性破坏、拒绝服务、非法使用。3.访问控制策略可以划分为()和()​ 强制性访问控制策略(MAC)和自主性访问控制策略(DAC)。4.安全性攻击可以划分为()和()​ 被动攻击和主动攻击。5.X800定义的五类安全服务是​ 认证、访问控制、数据保密性、数据完整性、不可否认性。6.X800定义的8_预言者会话攻击

minio实现大文件分片上传+断点续传+预览_minio 合并文件后 损坏-程序员宅基地

文章浏览阅读3.5k次,点赞5次,收藏18次。minio实现大文件分片上传+断点续传+预览只提供后端java代码思路:前端分片校验文件md5是否已经存在 --不存在创建临时桶存分片校验分块是否已经上传分块上传合并分块校验合成后md5是否相同代码gitee:https://gitee.com/lulunb/minio-boot.git..._minio 合并文件后 损坏

使用Poi实现Java读写Excel (一)_java读取ecle表格-程序员宅基地

文章浏览阅读1.3k次。POI提供API给Java程序对Microsoft Office格式档案读和写的功能。POI可以操作的文档格式有excel,word,powerpoint等,在此介绍POI操作excel的步骤。关于POI操作其他文档的步骤,大家可以参考其他资料。首先需要去apache poi的官网上下载poi开发包。我这里使用的版本是3.15 官方下载链接:http://poi.apache.org/ Csd_java读取ecle表格

随便推点

python制作zzulioj排名动态图-程序员宅基地

文章浏览阅读2.8k次。日常爬取学校oj网站# -*- codeing = utf-8 -*-# @Time : 2021/3/11 22:45# @Author :老七疯狂吸氧# @file kozzulioj.py# @Software:PyCharmimport reimport requestsimport pandas as pdimport jsonimport timeimport numpy as nmimport tkinter as tkfrom pyecharts import op

如何 循环 字母 php,PHP-php循环打印a-z字母的疑惑-程序员宅基地

文章浏览阅读139次。读一下文档吧:docPHP follows Perl's convention when dealing with arithmetic operations on character variables and not C's. For example, in PHP and Perl $a = 'Z'; $a++; turns $a into 'AA', while in C a = 'Z';...

arm Linux系统启动之----start_kernel函数_arm start函数-程序员宅基地

文章浏览阅读1k次。[cpp] view plaincopyhead-common.S ---具体做了哪些动作 ---跳转到init/main.c ---b start_kernel //关于start_kernel的强文深入理解linux内核,第八章 main.c asmlinkage void __init start_kernel(void)_arm start函数

hive使用beeline连接遇到的问题_beeline version 2.0.0 by apache hive beeline> !con-程序员宅基地

文章浏览阅读7.6k次,点赞2次,收藏14次。hiveserver2未启动如果hiveserver2未启动就直接使用beeline连接,会出现如下错误:Error: Could not open client transport with JDBC Uri: jdbc:hive2://master:10000/default: java.net.ConnectException: Connection refused (Connectio..._beeline version 2.0.0 by apache hive beeline> !connect jdbc:hive2://master:1

Mac- .bash_profile解密_mac .bash_profile-程序员宅基地

文章浏览阅读8.1k次,点赞4次,收藏27次。目录标题前言一、如何打开./bash_profile文件方式1:cat 命令方式2:open 命令二、如何修改./bash_profile配置文件方式一:进入./bash_profile并修改配置文件1、启动Terminal2、进入当前用户的home目录3、编辑.bash_profile文件4、保存文件,关闭.bash_profile5、更新刚配置的环境变量6、cmd 输入echo $PATH可查看配置结果方式二:命令行方式修改配置文件1、在命令行中输入2、查看环境变量3、更新刚配置的环境变量三、环境变量配_mac .bash_profile

使用pytorch_pretrained_bert将tensorflow模型转化为pytorch模型-程序员宅基地

文章浏览阅读5.8k次,点赞9次,收藏22次。BERT仓库里的模型是TensorFlow版本的,需要进行相应的转换才能在pytorch中使用在Google BERT仓库里下载需要的模型,这里使用的是中文预训练模型(chinese_L-12_H-768_A_12)下载chinese_L-12_H-768_A-12.zip后解压,里面有5个文件bert_config.jsonbert_model.ckpt.data-00000-of-0...

推荐文章

热门文章

相关标签