HTML 模态框

最新推荐文章于 2023-06-11 09:51:49 发布
最新推荐文章于 2023-06-11 09:51:49 发布
阅读量162 收藏
点赞数
分类专栏： html 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62791728/article/details/121121211
版权

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .modal{

            position: fixed;

            left: 0;

            top: 0;

            width: 100%;

            height: 100%;

            background-color: rgba(0, 0, 0, 0.5);

        }

        .box{

            position: absolute;

            left: 0;

            top: 0;

            bottom: 0;

            right: 0;

            margin: auto;

            width: 600px;

            height: 400px;

            background-color: #fff;

        }

    </style>

</head>

<body>

    <p style="height: 500px;background-color: lime;"></p>

    <p style="height: 500px;background-color: yellow;"></p>

    <p style="height: 500px;background-color: red;"></p>

    <p style="height: 500px;background-color: lightblue;"></p>

    <p style="height: 500px;background-color: pink;"></p>

    <p style="height: 500px;background-color: palevioletred;"></p>

    <p style="height: 500px;background-color: orange;"></p>

    <div class="modal">

        <div class="box"></div>

    </div>

</body>

</html>

熊他丫的
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
51单片机88点阵游戏打飞机雷电源码.rar
03-26
51单片机88点阵游戏打飞机雷电源码.rar51单片机88点阵游戏打飞机雷电源码.rar51单片机88点阵游戏打飞机雷电源码.rar51单片机88点阵游戏打飞机雷电源码.rar51单片机88点阵游戏打飞机雷电源码.rar51单片机88点阵游戏打飞机雷电源码.rar51单片机88点阵游戏打飞机雷电源码.rar
javascript打飞机程序8x8x飞机大战js打飞机程序，飞机大战知识点包含了JavaScript面向过程的全部知识点，包括变量、运算符、判断、循环、数组、自定义函数、系统函数、事件等。...
计算机毕业论文源码，学生个人网页制作html源码。贴近用户做网络推广和互联网优化。
11-26 38万+
js打飞机程序，飞机大战知识点包含了JavaScript面向过程的全部知识点，包括变量、运算符、判断、循环、数组、自定义函数、系统函数、事件等。讲解了JavaScript编程语言制作游戏界面，添加游戏控制、制作元素动画、制作多元素场景，添加碰撞功能、制作精灵动画等功能源码如下：html：<!DOCTYPE html&...
Java打印输出:8x8x
计算机毕业论文源码，学生个人网页制作html源码。贴近用户做网络推广和互联网优化。
12-02 60万+
Java打印输出数据println和print打印输出数据，System.out.println System.out.println("8x8x");//8x8x System.out.println("8x8x");//8x8x在线天堂 System.out.println("hello world!!!");//输出数据并换行
块元素居中方式
gklcsdn的博客
12-10 794
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
搬家了，新地址http://www.cnblogs.com/clayman/
Clayman的专栏
05-18 17万+
   终于决定搬家，难用都还可以勉强忍受，可是最近居然开始乱封blog了，怕怕。可惜那么多文章带不走，手动把部份我觉得比较有价值的文章搬过去了。呵呵，欢迎大家有空过去看看:)。 此blog将不再更新...........
html模态框
05-04
自制html模态框.
HTML模态框实现示例
最新发布
12-21
模态框
HTML5响应式模态框(模态对话框).zip
05-16
HTML5响应式模态框，或称为模态对话框，是网页设计中一个重要的交互元素。在现代网页开发中，模态框常用于显示额外信息、提示用户确认操作或者提供表单输入，而不中断主页面的流程。这种设计模式允许用户在不离开...
Bootstrap模态框使用详解
08-31
除了HTML数据属性外，还可以使用JavaScript API来控制模态框的显示和隐藏： ```javascript // 打开模态框 $('#systemAdd').modal('show'); // 隐藏模态框 $('#systemAdd').modal('hide'); ``` ### 7. 响应式设计 ...
8X8X8光立方整体框架设计&技术细节
热门推荐
zchong996的专栏
10-07 105万+
从一师兄那拿来的，东西是师兄自己做的，觉得特有才一人，只是进了互联网公司，感觉做嵌入式更适合他～～～ Powered by lihui & Liusheng @2012, Shenyang       太过技术了，写给自己留着看的，不懂的可绕行，确实有些头大。^_^       在对最陌生的模电部分进行完仿真测试之后，8X8X8光立方的软硬件方案终于最终定了下来，开始进行下一阶段的工作了：焊
打飞机小游戏
zhyue28的博客
03-07 25万+
射击游戏需求: 所参与的角色: 英雄机、子弹、小敌机、大敌机、小蜜蜂、天空 对象间的关系: 英雄机可以发射子弹(单倍火力(0)、双倍火力(&gt;0)) 子弹可以射击敌人(小敌机、大敌机、小蜜蜂) 打掉小敌机，玩家得1分 打掉大敌机，玩家得3分 打掉小蜜蜂，英雄机得奖励(1条命、40火力值) 发射一次双倍火力，则火力值减2 英雄机、子弹、小敌机、大敌机、小蜜蜂都在天空上飞 敌人撞到英雄...
可拔插视图
qq1105273619的博客
11-15 24万+
基于类的试图from flask.views import View from flask import render_templateclass UserLogin(View): methods=['POST','GET'] def dispatch_request(self): return render_template('login.html') 基于方法的试图from
苹果cmsV10 仿8x8x 视频图片小说源码 在线充值VIP会员 三级分销 推广 提现 在线
百创科技
06-11 3万+
试看：可设置试看时间VIP会员制度：可对会员进行权限是设置及时间限制三级分销：每个会员后台都有自己的推广地址，凡是从推广地址进行注册的会员都会成为下级推广：通过推广链接获得积分提现：积分可兑换现金并进行提现在线支付：支付宝、微信、码支付等等卡密：后台可批量生成卡密，前台进行核销采集：可以使用接口进行一建采集，或者自己手写采集规则积分：可对每部视频进行积分设置及消费制度密码：可单独对每个视频进行密码限制，输入密码即可打开。
8x8x8 LED 立方体
strongerHuang
03-31 19万+
Linux 2.6.19.x 内核编译配置选项简介(转)
sunwill_chen的专栏
05-20 1001
Linux 2.6.19.x 内核编译配置选项简介作者：金步国版权声明本文作者是一位自由软件爱好者，所以本文虽然不是软件，但是本着 GPL 的精神发布。任何人都可以自由使用、转载、复制和再分发，但必须保留作者署名，亦不得对声明中的任何条款作任何形式的修改，也不得附加任何其它条件。您可以自由链接、下载、传播此文档，但前提是必须保证全文完整转载，包括完整的版权信息和作译者声明。其他作品本文作者十分愿意
Java打印输出:java在线8x8x
计算机毕业论文源码，学生个人网页制作html源码。贴近用户做网络推广和互联网优化。
12-05 2万+
Java打印输出数据println和print打印输出数据，System.out.println("java在线8x8x");av在线8x8x System.out.println("java在线8x8x");java在线8x8x System.out.println("java在线");//java在线
基于51单片机的8x8x8LED光立方设计
会飞的鱼的博客
04-22 86万+
1.简介 本设计是以STC89C52单片机的8x8x8的LED光立方。本设计将LED光立方分成8层，分别由单片机的P1，8个IO口来控制每一层，由于采用的是共阴极所以当层电位为高电平有效，由P0口和P2的总共16个IO口来控制每层的64盏灯，低电平有效，P2口通过8个74HC573缓冲器芯片来驱动LED。这样就可以通过控制IO口的输出电平来控制每盏灯的亮灭。 2.硬件设计 本系统的硬件电路主要单片...
python解码gbk_Python 之 解码汉字乱码（如果gbk、utf8都试过不行，可以试试这个）...
weixin_39643336的博客
11-25 1910
起因：使用 requests.get(url) 获取页面内容，并打印出来后显示如下：使用 type() 查看类型也是 print [content] 显示的也是像utf-8的样子：[u'\n\t\tAPI\xe5\xbc\x80\xe6\x94\xbe\xe5\xb9\xb3\xe5\x8f\xb0\n\t\t\xe8\xae\xa4\xe8\xaf\x81\xe5\xa4\xb1\xe8\xb4...
CentOS8 KVM USB设备直通虚拟机并实现热插拨
.
05-02 5万+
目录 实现直通 查看USB相关信息： 查看USB的树状信息： 新建一个xml文件： 修改对应虚拟机的xml配置文件： 执行设备追加： 支持热插拨 实现直通 查看USB相关信息： # lsusb Bus 002 Device 003: ID 058f:6387 Alcor Micro Corp. Flash Drive Bus 002 Device 002: ID 808...
管理后台html模态框输入短信内容
04-07
以下是一种简单的实现方法： 1. 在管理后台的页面中添加一个按钮，用于触发模态框的显示。 2. 在模态框中添加一个文本框，用于输入短信内容。 3. 在模态框的底部添加两个按钮，一个用于提交输入的短信内容，另一个用于关闭模态框。 4. 当用户点击提交按钮时，获取文本框中的值，并向后台发送请求，将短信内容保存到数据库中。 5. 当用户点击关闭按钮时，隐藏模态框。 以下是一个基本的HTML代码示例： ``` <!-- 短信内容输入的模态框 --> <div class="modal fade" id="smsModal" tabindex="-1" role="dialog" aria-labelledby="smsModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="smsModalLabel">输入短信内容</h4> </div> <div class="modal-body"> <div class="form-group"> <label for="smsContent">短信内容：</label> <input type="text" class="form-control" id="smsContent" placeholder="请输入短信内容"> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" onclick="submitSMS()">提交</button> <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button> </div> </div> </div> </div> <!-- 触发模态框的按钮 --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#smsModal">发送短信</button> ``` 在JavaScript中，可以通过以下代码获取输入的短信内容并提交到后台： ``` function submitSMS() { var smsContent = document.getElementById("smsContent").value; // 向后台发送请求，将短信内容保存到数据库中 // ... // 隐藏模态框 $("#smsModal").modal("hide"); } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值