使用原生的css写一个模态框

最新推荐文章于 2024-07-12 18:49:24 发布
最新推荐文章于 2024-07-12 18:49:24 发布
阅读量803 收藏 2
点赞数 1
文章标签： 模态框 css
原文链接：https://blog.csdn.net/qq_37026254/article/details/88716812
版权 
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>简单的模态框(Modal)</title>
    <style>
        .wrap {
            padding: 40px;
            text-align: center;
        }
        .btn {
            background: #428bca;
            border: #357ebd solid 1px;
            border-radius: 3px;
            color: #fff;
            display: inline-block;
            font-size: 14px;
            padding: 8px 15px;
            text-decoration: none;
            text-align: center;
            min-width: 60px;
            position: relative;
            transition: color .1s ease;
        }
        .btn:hover {
            background: #357ebd;
        }
        .btn.btn-big {
            font-size: 18px;
            padding: 15px 20px;
            min-width: 100px;
        }
        .btn-close {
            color: #aaa;
            font-size: 30px;
            text-decoration: none;
            position: absolute;
            right: 5px;
            top: 0;
        }
        .btn-close:hover {
            color: #919191;
        }
        .modal:before {
            content: "";
            display: none;
            background: rgba(0, 0, 0, 0.6);
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 10;
        }
        .modal:target:before {
            display: block;
        }
        .modal:target .modal-dialog {
            -webkit-transform: translate(0, 0);
            -ms-transform: translate(0, 0);
            transform: translate(0, 0);
            top: 10%;
        }
        .modal-dialog {
            background: #fefefe;
            border: #333 solid 1px;
            border-radius: 5px;
            margin-left: -120px;
            position: fixed;
            left: 50%;
            top: -100%;
            z-index: 11;
            width: 240px;
            -webkit-transform: translate(0, -500%);
            -ms-transform: translate(0, -500%);
            transform: translate(0, -500%);
            -webkit-transition: -webkit-transform 0.3s ease-out;
            -moz-transition: -moz-transform 0.3s ease-out;
            -o-transition: -o-transform 0.3s ease-out;
            transition: transform 0.3s ease-out;
        }
        .modal-body {
            padding: 10px 20px;
        }
        .modal-header,
        .modal-footer {
            padding: 10px 20px;
        }
        .modal-header {
            border-bottom: #eee solid 1px;
        }
        .modal-header h2 {
            font-size: 20px;
        }
        .modal-footer {
            border-top: #eee solid 1px;
            text-align: right;
        }
    </style>
</head>
<body>
<div class="wrap">
    <a href="#modal-one" class="btn btn-big">模态框</a>
</div>
<div class="modal" id="modal-one" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-header">
            <h2>42度空间</h2>
            <a href="#" class="btn-close" aria-hidden="true">×</a>
        </div>
        <div class="modal-body">
            <p>一个纯CSS的模态框！</p>
        </div>
        <div class="modal-footer">
            <a href="#" class="btn">确 定</a>
        </div>
    </div>
</div>
</body>
</html>

 

ClearLoveQ
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
原生JS+css3实现bootstrap模态框
08-20
用原生JavaScript和CSS3共同实现bootstrap模态框效果。
移动端原生css模态框
11-06
总结起来，移动端原生CSS模态框的实现涉及CSS布局技巧和JavaScript交互逻辑。通过自定义样式和组件配置，我们可以创建高度适应移动端网页和小程序的提示组件。这个过程中，CSS用于定义视觉样式，Vue.js这样的前端...
如何使用CSS实现一个模态框（Modal）效果？
官方推荐
08-15 6743
如何使用CSS实现一个模态框（Modal）效果？
Web开发：一个可拖拽的模态框（HTML、CSS、JavaScript）
最新发布
m0_65029152的博客
07-12 1638
本文主要记录使用html、css、JavaScript编写一个可拖拽模态框的相关内容和实现过程；
写一个模态框
weixin_42600407的博客
01-03 59
好的。 要创建一个模态框，需要使用 HTML、CSS 和 JavaScript。 HTML 代码： <!-- 模态框按钮 --> <button type="button" data-toggle="modal" data-target="#myModal">Open Modal</button> <!-- 模态框 --> <div clas...
纯css 实现模态框
嗝~
03-21 4149
对于模态框我个人一直都是用js + css 的方式实现，这里却采用css target 属性，很有想法 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>简单的模态框(Modal)</title> <style> ...
原生js实现简单的模态框示例
10-19
在这篇文章中，作者为我们展示了一个使用原生JavaScript实现简单模态框的示例。模态框是一种常见的网页交互元素，用于显示信息而不离开当前页面。实现模态框的方式有很多种，但作者选择了一种基础而直接的方法，即...
modal:一个原生写的简单模态框，支持IE8以上、chrome
05-01
介绍一个原生写的简单模态框，兼容IE8。功能特性1.支持标签属性关闭弹窗。2.支持点击弹窗区域外背景关闭弹窗。3.支持两种打开弹窗动画效果。4.支持ESC快捷键关闭弹窗。5.支持打开多个弹窗。目录结构│ //根目录│ ...
使用HTML5原生对话框元素并轻松创建模态框组件
12-14
以下是一个原生模态框的HTML结构： ```html 显示模态框 HTML5原生模态框 ``` 在原生Dialog元素中，`open`属性用于控制对话框的显示状态。默认情况下，Dialog会根据内容自动调整宽度和高度，并且绝对定位在页面...
4.1 纯css、html实现模态框（不用js）
火星人有可乐的博客
08-23 864
适用于前端入门小白的文章，如果刚好学了HTML、CSS,又还没有学习javascript，jQuery，但又想实现点击弹出一个小窗口框在原来的页面上，同时又能点击关闭这个小窗口。
bootstrap model.js 单模态框的css，js
02-10
bootstrap model.js 单模态框的css，js
一个最简单的模态框模板~
二到家的小熊的博客
02-19 5755
之前工作中经常用到模态框，早就想总结一下可苦于一直没有时间，今天忙里偷闲小结如下： 这里只是一个最简单的模态框哦~~ 先看一下效果吧： 因为实在是太简单了 所以还是直接上代码吧<head lang="en"> <meta charset="UTF-8"> <title></title> <style> body { font-
80CSS3效果：bootstrap之modal
weixin_30644369的博客
06-03 117
方法一：用bootstrap.css写样式，用bootstrap.js写模态。**html 代码**```html:run<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="utf-8"> <title>Bootstrap之Modal</title> ...
CSS 实现模态框效果
qq_27411845的博客
03-05 1286
封装模态框 首先用<div className='modal'>标签封装需要展示的模态框，放入需要呈现的元素，包括input、select等 在上一层的<div className='modal'>外再嵌套一层<div className='container'> 对className=‘container’添加样式 .container backgrou...
CSS图片模态窗口
Serena_tz的博客
02-25 407
我们将结合 CSS 和 JavaScript 来一起渲染图片。 首先，我们使用 CSS 来创建 modal 窗口 (对话框), 默认是隐藏的。 然后，我们使用 JavaScript 来显示模态窗口，当我们点击图片时，图片会在弹出的窗口中显示： 源代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS图片模态窗口</title> <style>
CSS 模态框：优雅的纯CSS解决方案
gitblog_00015的博客
05-09 459
CSS 模态框：优雅的纯CSS解决方案 css-modalA modal built with pure CSS, enhanced with JavaScript项目地址:https://gitcode.com/gh_mirrors/cs/css-modal CSS Modal 是一款基于纯CSS构建的模态窗口库，通过JavaScript增强功能，使其更加易用和可定制。 项目介绍 CSS M...
vue封装一个简单的modal对话框
qq_55491577的博客
02-08 1059
在modal.vue中，我们在props中接受四个参数，title：标题，width：宽度， height：高度，top：距离顶部的高度，不传则是默认的值；并提供了两个具名插槽，header和footer，以及一个默认插槽slot显示里面的内容；并添加了三个自定义事件控制modal的显示和隐藏；点击右上角的xx, 取消、确定都会把对话框隐藏，并使用message组件提示用户 ，可以再这三个事件写自己的逻辑，比如点击确定发起请求等；通过外层的div控制组件的显示隐藏。点击打开modal那个按钮弹出对话框。
CSS Modal—纯CSS实现模态窗口
BILL-博客-LLIB
10-21 9300
今天介绍一个用CSS实现模态窗口的插件——CSS Modal ，利用它可以很方便的实现模态窗口。它可以用来展示任意的HTML内容，并且支持响应式设计，具有良好的兼容性，通过它的js扩展，还能实现更强大的功能。1、兼容性Chrome Firefox Safari 6.x Opera 12+ Internet Explorer 8 (部分功能) Internet Explorer 9+ iO
写一个弹窗组件 使用原生js
04-20
好的，我可以帮您回答关于前端开发的问题。对于弹窗组件，您可以使用原生 JavaScript 来创建一个模态框，并利用相关的 CSS 样式进行美化。您可以参考以下示例代码： HTML 代码： ``` <button id="myBtn">打开弹窗</button> <div id="myModal" class="modal"> <div class="modal-content"> <span class="close">×</span> <p>这是一个模态框。请在此处添加你的内容。</p> </div> </div> ``` CSS 代码： ``` .modal { display: none; position: fixed; z-index: 10; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.5); } .modal-content { background-color: #fefefe; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 80%; } .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; } ``` JavaScript 代码： ``` var modal = document.getElementById("myModal"); var btn = document.getElementById("myBtn"); var span = document.getElementsByClassName("close")[0]; btn.onclick = function() { modal.style.display = "block"; } span.onclick = function() { modal.style.display = "none"; } window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } ``` 以上就是一个简单的模态框代码实现。当点击按钮时，模态框会弹出显示。当点击关闭按钮或模态框的任意位置时，模态框会关闭隐藏。您可以根据自己的需求进一步优化这个组件。希望对您有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值