点击弹出一个面板代码示例

最新推荐文章于 2023-09-05 23:16:51 发布
最新推荐文章于 2023-09-05 23:16:51 发布
阅读量794 收藏 1
点赞数
分类专栏： 前端开发 
<!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>

绛门人
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
弹出居中的div层
yflxc的专栏
11-11 2216
点击文字弹出一个DIV层窗口代码                    .black_overlay{              display: none;              position: absolute;              top: 0%;              left: 0%;              width: 100%;         
HTML 常见的JS弹窗
YGRQG的博客
02-02 6751
HTML 常见的三种JS弹窗
浏览器原生html弹窗、面板、事件、dialog
最新发布
“代码农”微信公众号
09-05 2447
浏览器原生html弹窗、面板、事件、dialog。
JS 写弹窗
Benxiaohai_311的博客
12-08 3325
我们平常在项目中，通常需要给用户操作的结果进行提示，但是js默认给出的提示弹窗样式又比较丑，所以我们可以自己封装弹出层，用来给用户做不同的提示
js 点击页面其他地方关闭弹出层(示例代码)
12-08
代码如下:<html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <title>无标题文档</title> <style type=”text/css”> <!– *{font-...
滑动弹出面板代码(iPhone)
09-14
iOS滑动弹出面板示例代码，效果类似Angry bird里面的滑动弹出菜单。
使用vue实现点击按钮滑出面板的实现代码
01-19
在通信的时候容易出错，或者信息根本传不过来。那么这里就示例一下，怎么通过组件之间的通信完成点击...引入组件，即是要弹出的组件 import addForm from './docsForm' export default { components: { addForm },
javaSE代码实例
06-21
1.4　第一个Java程序　8 1.4.1　开发源代码　8 1.4.2　编译运行　9 1.5　小结　11 第2章　基本数据类型——构建Java 大厦的基础　12 2.1　源代码注释　12 2.1.1　单行注释　12 2.1.2　区域注释　12 2.1.3　文档...
JAVA上百实例源码以及开源项目源代码
09-17
　Tcp服务端与客户端的JAVA实例源代码，一个简单的Java TCP服务器端程序，别外还有一个客户端的程序，两者互相配合可以开发出超多的网络程序，这是最基础的部分。 递归遍历矩阵 1个目标文件，简单！ 多人聊天室 3...
点击文字弹出一个DIV层窗口代码
07-15
点击文字弹出一个DIV层窗口代码,下载就能用
代码简洁的点击弹出层源码
11-21
点击弹出层源码,仿"爱问"弹出窗口,很漂亮
弹窗代码大全 弹窗广告代码
MR ZHOU
09-20 7780
1.超级弹窗代码(MYIE也照弹) 复制内容到剪贴板 代码: focusid=setTimeout("focus();window.showModelessDialog('http://www.dongdong123.com','','scroll:1;status:0;help:0;resizable:1;dialogWidth:0px;dialogHeight:0px')",0000)
弹出窗口代码大全
SmartJavaer的专栏
11-17 2676
弹出窗口代码大全         如何利用网页弹出各种形式的窗口，我想大家大多都是知道些的，但那种多种多样的弹出式窗口是怎么搞出来的，我们今天就来学习一下：1.弹启一个全屏窗口;www.kunde58.com　　2.弹启一个被F11化后的窗口;www.kunde58.com　　3.弹启一个带有收藏链接工具栏的窗口www.wangye8.com　　4.网页对话框s
js弹出框、对话框、提示框、弹窗总结
热门推荐
2301_76965813的博客
04-19 1万+
一、JS的三种最常见的对话框[javascript二、点击按钮时常用的6中提示框和操作[html] 三、弹出独立窗口[javascript] 参数解释：window.open 弹出新窗口的命令； ‘page.html’ 弹出窗口的文件名； ‘newwindow’ 弹出窗口的名字（不是文件名），非必须，可用空”代替； 　　height=100 窗口高度； 　　width=400 窗口宽度； 　　top=0 窗口距离屏幕上方的象素值； 　　left=0 窗口距离屏幕左侧的象素值； 　　toolba
html弹窗代码大全定时弹窗,js点击弹窗弹出表单框代码
weixin_42405371的博客
06-07 2634
点击弹窗弹出表单框代码 HTML+css+js全部代码js点击弹窗弹出登录框代码*{ margin:0; padding:0;}button, input{ outline:none;}button, .login{ width:120px; height:42px; background:#f40; color:#fff; border:none; border-radius:6px; disp...
JavaScript 弹窗
笔记
02-24 4569
JavaScript弹窗是Web开发中常见的交互方式之一。弹窗可以为用户提供提示、警告或者输入框等交互方式，让用户在使用网站或应用时更加便捷。在本文中，我们将讨论JavaScript弹窗的作用、类型和用途。
java的gui怎么写点击按钮弹出一个窗口提示的代码
weixin_35750747的博客
12-26 1236
在 Java 中使用 GUI 编写点击按钮弹出一个窗口提示的代码，需要使用到 Java 的 AWT 和 Swing 包。 首先，在你的 Java 类中导入以下包： import java.awt.*; import java.awt.event.*; import javax.swing.*; 然后，在你的 Java 类中声明一个按钮： JButton button= new JButton("...
简易手写广告弹窗
潮汐未见潮落的博客
05-31 980
实现简单的广告弹窗
html登入弹框插件,index.html
weixin_34736467的博客
06-09 699
hsycmsAlert弹窗插件body,html{ width:100%; height:100%;}body{ max-width:640px; margin:0 auto;}.btnss{display:flex;height:100%;justify-items: center;flex-direction: column;justify-content: center;}.box{ pad...
javafx通过一个面板弹出新面板
05-24
可以通过以下步骤在JavaFX中实现面板弹出新面板： 1. 创建两个面板，一个作为主要的面板，另一个作为弹出的面板。 2. 将弹出的面板设置为不可见。 3. 在主要的面板中添加一个按钮或其他事件触发器。 4. 在事件触发器中，将弹出的面板设置为可见，并在需要时设置其位置和大小。 5. 在弹出的面板中添加关闭按钮或其他事件触发器，以便在需要时关闭该面板。 下面是一个简单的示例代码： ```java import javafx.application.Application; import javafx.geometry.Pos; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.layout.StackPane; import javafx.scene.layout.VBox; import javafx.stage.Modality; import javafx.stage.Stage; public class PopupExample extends Application { @Override public void start(Stage primaryStage) throws Exception { // 创建主面板 StackPane root = new StackPane(); Button btn = new Button("弹出新面板"); btn.setOnAction(e -> { // 创建弹出面板 VBox popupRoot = new VBox(); popupRoot.setAlignment(Pos.CENTER); Button closeBtn = new Button("关闭"); closeBtn.setOnAction(event -> { // 关闭弹出面板 Stage popupStage = (Stage) closeBtn.getScene().getWindow(); popupStage.close(); }); popupRoot.getChildren().addAll(closeBtn); // 创建弹出窗口 Stage popupStage = new Stage(); popupStage.initOwner(primaryStage); popupStage.initModality(Modality.WINDOW_MODAL); popupStage.setScene(new Scene(popupRoot, 200, 200)); popupStage.show(); }); root.getChildren().addAll(btn); // 创建主窗口 primaryStage.setScene(new Scene(root, 400, 400)); primaryStage.show(); } public static void main(String[] args) { launch(args); } } ``` 在此示例中，单击“弹出新面板”按钮将显示一个新的面板，其中包含一个“关闭”按钮。单击“关闭”按钮将关闭该面板。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值