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

2024-09-05 10:08
文章标签 使用 div js 脚本 对话框

本文主要是介绍使用div和js脚本弹出对话框,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

使用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>

演示链接

源码下载

这篇关于使用div和js脚本弹出对话框的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1138661

相关文章

使用Dify访问mysql数据库详细代码示例

《使用Dify访问mysql数据库详细代码示例》:本文主要介绍使用Dify访问mysql数据库的相关资料,并详细讲解了如何在本地搭建数据库访问服务,使用ngrok暴露到公网,并创建知识库、数据库访... 1、在本地搭建数据库访问的服务,并使用ngrok暴露到公网。#sql_tools.pyfrom

使用mvn deploy命令上传jar包的实现

《使用mvndeploy命令上传jar包的实现》本文介绍了使用mvndeploy:deploy-file命令将本地仓库中的JAR包重新发布到Maven私服,文中通过示例代码介绍的非常详细,对大家的学... 目录一、背景二、环境三、配置nexus上传账号四、执行deploy命令上传包1. 首先需要把本地仓中要

Spring Cloud之注册中心Nacos的使用详解

《SpringCloud之注册中心Nacos的使用详解》本文介绍SpringCloudAlibaba中的Nacos组件,对比了Nacos与Eureka的区别,展示了如何在项目中引入SpringClo... 目录Naacos服务注册/服务发现引⼊Spring Cloud Alibaba依赖引入Naco编程s依

Java springBoot初步使用websocket的代码示例

《JavaspringBoot初步使用websocket的代码示例》:本文主要介绍JavaspringBoot初步使用websocket的相关资料,WebSocket是一种实现实时双向通信的协... 目录一、什么是websocket二、依赖坐标地址1.springBoot父级依赖2.springBoot依赖

Java使用Mail构建邮件功能的完整指南

《Java使用Mail构建邮件功能的完整指南》JavaMailAPI是一个功能强大的工具,它可以帮助开发者轻松实现邮件的发送与接收功能,本文将介绍如何使用JavaMail发送和接收邮件,希望对大家有所... 目录1、简述2、主要特点3、发送样例3.1 发送纯文本邮件3.2 发送 html 邮件3.3 发送带

使用DeepSeek搭建个人知识库(在笔记本电脑上)

《使用DeepSeek搭建个人知识库(在笔记本电脑上)》本文介绍了如何在笔记本电脑上使用DeepSeek和开源工具搭建个人知识库,通过安装DeepSeek和RAGFlow,并使用CherryStudi... 目录部署环境软件清单安装DeepSeek安装Cherry Studio安装RAGFlow设置知识库总

Python FastAPI入门安装使用

《PythonFastAPI入门安装使用》FastAPI是一个现代、快速的PythonWeb框架,用于构建API,它基于Python3.6+的类型提示特性,使得代码更加简洁且易于绶护,这篇文章主要介... 目录第一节:FastAPI入门一、FastAPI框架介绍什么是ASGI服务(WSGI)二、FastAP

Spring-AOP-ProceedingJoinPoint的使用详解

《Spring-AOP-ProceedingJoinPoint的使用详解》:本文主要介绍Spring-AOP-ProceedingJoinPoint的使用方式,具有很好的参考价值,希望对大家有所帮... 目录ProceedingJoinPoijsnt简介获取环绕通知方法的相关信息1.proceed()2.g

Maven pom.xml文件中build,plugin标签的使用小结

《Mavenpom.xml文件中build,plugin标签的使用小结》本文主要介绍了Mavenpom.xml文件中build,plugin标签的使用小结,文中通过示例代码介绍的非常详细,对大家的学... 目录<build> 标签Plugins插件<build> 标签<build> 标签是 pom.XML

JAVA虚拟机中 -D, -X, -XX ,-server参数使用

《JAVA虚拟机中-D,-X,-XX,-server参数使用》本文主要介绍了JAVA虚拟机中-D,-X,-XX,-server参数使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有... 目录一、-D参数二、-X参数三、-XX参数总结:在Java开发过程中,对Java虚拟机(JVM)的启动参数进