css模态弹出框原理_CSS3模态弹出窗口

最新推荐文章于 2024-07-13 11:50:40 发布
最新推荐文章于 2024-07-13 11:50:40 发布
阅读量1k 收藏
点赞数
文章标签： css html less js sms ViewUI
原文链接：https://www.script-tutorials.com/css3-modal-popups/
版权

css模态弹出框原理

CSS3 Modal Popups
CSS3 Modal Popups

CSS3 Modal Popups CSS popup. Today I will tell you how to create cool CSS3 modal popup windows (or boxes). Literally, not so long ago, in order to achieve such effects, we used jQuery. But, as it turned out, CSS3 has all the necessary tools for making modal windows too. In our demonstration I have prepared single page with two popup elements: join form and login form. Welcome to test results and understand how it was made.

CSS3 Modal Popups CSS弹出窗口 。 今天，我将告诉您如何创建很酷CSS3模式弹出窗口(或框)。 从字面上看，不久前，为了实现这种效果，我们使用了jQuery。 但是，事实证明，CSS3也具有制作模态窗口的所有必要工具。 在我们的演示中，我准备了一个包含两个弹出元素的页面：连接表单和登录表单。 欢迎测试结果并了解其结果。

现场演示

[sociallocker]

[社交储物柜]

下载结果

[/sociallocker]

[/ sociallocker]

Ok, download the example files and lets start !

好的，下载示例文件，然后开始！

步骤1. HTML (Step 1. HTML)

First, lets create the main HTML markup. As you can see – the structure is quite easy. Here are one panel with buttons and two popups. Each of them contains own overlay DIV element and popup DIV element with some content inside and ‘close’ button.

首先，让我们创建主要HTML标记。 如您所见–结构非常简单。 这是一个带有按钮和两个弹出窗口的面板。 它们每个都包含自己的overlay DIV元素和弹出式DIV元素，其中包含一些内容，并带有“关闭”按钮。

index.html (index.html)


<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>CSS3 Modal Popups | Script Tutorials</title>
        <link href="css/layout.css" rel="stylesheet" type="text/css" />
        <link href="css/modal.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <header>
            <h2>CSS3 Modal Popups</h2>
            <a href="https://www.script-tutorials.com/css3-modal-popups/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
        </header>
        <!-- panel with buttons -->
        <div class="main">
            <div class="panel">
                <a href="#login_form" id="login_pop">Log In</a>
                <a href="#join_form" id="join_pop">Sign Up</a>
            </div>
        </div>
        <!-- popup form #1 -->
        <a href="#x" class="overlay" id="login_form"></a>
        <div class="popup">
            <h2>Welcome Guest!</h2>
            <p>Please enter your login and password here</p>
            <div>
                <label for="login">Login</label>
                <input type="text" id="login" value="" />
            </div>
            <div>
                <label for="password">Password</label>
                <input type="password" id="password" value="" />
            </div>
            <input type="button" value="Log In" />
            <a class="close" href="#close"></a>
        </div>
        <!-- popup form #2 -->
        <a href="#x" class="overlay" id="join_form"></a>
        <div class="popup">
            <h2>Sign Up</h2>
            <p>Please enter your details here</p>
            <div>
                <label for="email">Login (Email)</label>
                <input type="text" id="email" value="" />
            </div>
            <div>
                <label for="pass">Password</label>
                <input type="password" id="pass" value="" />
            </div>
            <div>
                <label for="firstname">First name</label>
                <input type="text" id="firstname" value="" />
            </div>
            <div>
                <label for="lastname">Last name</label>
                <input type="text" id="lastname" value="" />
            </div>
            <input type="button" value="Sign Up" />&nbsp;&nbsp;&nbsp;or&nbsp;&nbsp;&nbsp;<a href="#login_form" id="login_pop">Log In</a>
            <a class="close" href="#close"></a>
        </div>
    </body>
</html>



<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>CSS3 Modal Popups | Script Tutorials</title>
        <link href="css/layout.css" rel="stylesheet" type="text/css" />
        <link href="css/modal.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <header>
            <h2>CSS3 Modal Popups</h2>
            <a href="https://www.script-tutorials.com/css3-modal-popups/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
        </header>
        <!-- panel with buttons -->
        <div class="main">
            <div class="panel">
                <a href="#login_form" id="login_pop">Log In</a>
                <a href="#join_form" id="join_pop">Sign Up</a>
            </div>
        </div>
        <!-- popup form #1 -->
        <a href="#x" class="overlay" id="login_form"></a>
        <div class="popup">
            <h2>Welcome Guest!</h2>
            <p>Please enter your login and password here</p>
            <div>
                <label for="login">Login</label>
                <input type="text" id="login" value="" />
            </div>
            <div>
                <label for="password">Password</label>
                <input type="password" id="password" value="" />
            </div>
            <input type="button" value="Log In" />
            <a class="close" href="#close"></a>
        </div>
        <!-- popup form #2 -->
        <a href="#x" class="overlay" id="join_form"></a>
        <div class="popup">
            <h2>Sign Up</h2>
            <p>Please enter your details here</p>
            <div>
                <label for="email">Login (Email)</label>
                <input type="text" id="email" value="" />
            </div>
            <div>
                <label for="pass">Password</label>
                <input type="password" id="pass" value="" />
            </div>
            <div>
                <label for="firstname">First name</label>
                <input type="text" id="firstname" value="" />
            </div>
            <div>
                <label for="lastname">Last name</label>
                <input type="text" id="lastname" value="" />
            </div>
            <input type="button" value="Sign Up" />&nbsp;&nbsp;&nbsp;or&nbsp;&nbsp;&nbsp;<a href="#login_form" id="login_pop">Log In</a>
            <a class="close" href="#close"></a>
        </div>
    </body>
</html>

步骤2. CSS (Step 2. CSS)

I omit styles of layout.css. Here are nothing interesting. The most interesting – next one file (where I have prepared all necessary styles for our modal popups):

我省略了layout.css的样式。 这没什么有趣的。 最有趣的是下一个文件(我为模态弹出窗口准备了所有必要的样式)：

css / modal.css (css/modal.css)

.main {
    background: #aaa url(../images/bg.jpg) no-repeat;
    width: 800px;
    height: 600px;
    margin: 50px auto;
}
.panel {
    background-color: #444;
    height: 34px;
    padding: 10px;
}
.panel a#login_pop, .panel a#join_pop {
    border: 2px solid #aaa;
    color: #fff;
    display: block;
    float: right;
    margin-right: 10px;
    padding: 5px 10px;
    text-decoration: none;
    text-shadow: 1px 1px #000;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}
a#login_pop:hover, a#join_pop:hover {
    border-color: #eee;
}
.overlay {
    background-color: rgba(0, 0, 0, 0.6);
    bottom: 0;
    cursor: default;
    left: 0;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    visibility: hidden;
    z-index: 1;
    -webkit-transition: opacity .5s;
    -moz-transition: opacity .5s;
    -ms-transition: opacity .5s;
    -o-transition: opacity .5s;
    transition: opacity .5s;
}
.overlay:target {
    visibility: visible;
    opacity: 1;
}
.popup {
    background-color: #fff;
    border: 3px solid #fff;
    display: inline-block;
    left: 50%;
    opacity: 0;
    padding: 15px;
    position: fixed;
    text-align: justify;
    top: 40%;
    visibility: hidden;
    z-index: 10;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    -moz-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    -ms-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    -o-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    -webkit-transition: opacity .5s, top .5s;
    -moz-transition: opacity .5s, top .5s;
    -ms-transition: opacity .5s, top .5s;
    -o-transition: opacity .5s, top .5s;
    transition: opacity .5s, top .5s;
}
.overlay:target+.popup {
    top: 50%;
    opacity: 1;
    visibility: visible;
}
.close {
    background-color: rgba(0, 0, 0, 0.8);
    height: 30px;
    line-height: 30px;
    position: absolute;
    right: 0;
    text-align: center;
    text-decoration: none;
    top: -15px;
    width: 30px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;
}
.close:before {
    color: rgba(255, 255, 255, 0.9);
    content: "X";
    font-size: 24px;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
}
.close:hover {
    background-color: rgba(64, 128, 128, 0.8);
}
.popup p, .popup div {
    margin-bottom: 10px;
}
.popup label {
    display: inline-block;
    text-align: left;
    width: 120px;
}
.popup input[type="text"], .popup input[type="password"] {
    border: 1px solid;
    border-color: #999 #ccc #ccc;
    margin: 0;
    padding: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
}
.popup input[type="text"]:hover, .popup input[type="password"]:hover {
    border-color: #555 #888 #888;
}


.main {
    background: #aaa url(../images/bg.jpg) no-repeat;
    width: 800px;
    height: 600px;
    margin: 50px auto;
}
.panel {
    background-color: #444;
    height: 34px;
    padding: 10px;
}
.panel a#login_pop, .panel a#join_pop {
    border: 2px solid #aaa;
    color: #fff;
    display: block;
    float: right;
    margin-right: 10px;
    padding: 5px 10px;
    text-decoration: none;
    text-shadow: 1px 1px #000;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}
a#login_pop:hover, a#join_pop:hover {
    border-color: #eee;
}
.overlay {
    background-color: rgba(0, 0, 0, 0.6);
    bottom: 0;
    cursor: default;
    left: 0;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    visibility: hidden;
    z-index: 1;
    -webkit-transition: opacity .5s;
    -moz-transition: opacity .5s;
    -ms-transition: opacity .5s;
    -o-transition: opacity .5s;
    transition: opacity .5s;
}
.overlay:target {
    visibility: visible;
    opacity: 1;
}
.popup {
    background-color: #fff;
    border: 3px solid #fff;
    display: inline-block;
    left: 50%;
    opacity: 0;
    padding: 15px;
    position: fixed;
    text-align: justify;
    top: 40%;
    visibility: hidden;
    z-index: 10;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    -moz-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    -ms-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    -o-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    -webkit-transition: opacity .5s, top .5s;
    -moz-transition: opacity .5s, top .5s;
    -ms-transition: opacity .5s, top .5s;
    -o-transition: opacity .5s, top .5s;
    transition: opacity .5s, top .5s;
}
.overlay:target+.popup {
    top: 50%;
    opacity: 1;
    visibility: visible;
}
.close {
    background-color: rgba(0, 0, 0, 0.8);
    height: 30px;
    line-height: 30px;
    position: absolute;
    right: 0;
    text-align: center;
    text-decoration: none;
    top: -15px;
    width: 30px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;
}
.close:before {
    color: rgba(255, 255, 255, 0.9);
    content: "X";
    font-size: 24px;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
}
.close:hover {
    background-color: rgba(64, 128, 128, 0.8);
}
.popup p, .popup div {
    margin-bottom: 10px;
}
.popup label {
    display: inline-block;
    text-align: left;
    width: 120px;
}
.popup input[type="text"], .popup input[type="password"] {
    border: 1px solid;
    border-color: #999 #ccc #ccc;
    margin: 0;
    padding: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
}
.popup input[type="text"]:hover, .popup input[type="password"]:hover {
    border-color: #555 #888 #888;
}
现场演示

结论 (Conclusion)

Today we have made another great CSS3 demonstration – popup modal windows. Welcome back to read our new tutorials!

今天，我们进行了另一个出色CSS3演示–弹出模式窗口。 欢迎回到阅读我们的新教程！

翻译自: https://www.script-tutorials.com/css3-modal-popups/

css模态弹出框原理

cuken7684698822
关注
css3-弹出窗口弹出效果
02-18
多款css3-弹出窗口弹出效果，文件为DEMO，集合多种弹窗效果。
css3 弹框功能样式
weixin_30596165的博客
10-26 107
.message-box{ position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.3); visibility: hidden; } .message-box, .message-box-main, .btn{ transition:...
基于CSS两种菜单创建方式
最新发布
sunbeacher的博客
07-13 1012
HTML多种场景下需要菜单的实现，这里提供两种方式： （1）基于CSS的POPUP式菜单 特征：按需显示POPUP菜单，但布局是浮动的。 （2）覆盖式弹出菜单。 特征：按需显示菜单，菜单以弹出窗口模式显示，会覆盖下面的内容
css 弹出框
05-29
这是一款利用jQuery和CSS3实现的自定义弹出窗口，这可比浏览器默认的弹出窗口漂亮多了。弹出窗口中可以自定义html，十分灵活。另外最重要的一个特点是，它利用了jQuery和CSS3可以实现很多种弹出窗口动画效果，挺酷的。
html5+css3弹出输入框
11-12
一个漂亮的弹出输入款 以登录注册为例 经测试可用 非常实用
纯css3遮罩弹出模态框代码
07-24
纯CSS3实现的遮罩弹出模态框代码，无需JavaScript插件，仅依赖于CSS3的新特性，能为用户提供更为流畅且响应式的体验。 首先，我们要理解CSS3中的关键概念，如选择器、盒模型、动画和过渡。CSS3选择器允许更精确地...
js模态弹出框插件ModalLayer
06-24
**ModalLayer：JavaScript模态弹出框插件详解** 在Web开发中，模态弹出框（Modal Layer）是一种常见的用户交互元素，用于显示额外信息、提示用户进行操作或者提供表单输入。ModalLayer是一款强大的JavaScript插件，...
Bootstrap源码解读模态弹出框（11）
08-31
模态弹出框的实现原理基于CSS的`position: fixed`属性，使其相对于浏览器窗口定位，始终保持在可视区域内。`.modal`类设定了模态框的位置，覆盖整个屏幕，而`.modal-dialog`则根据需要调整其大小和位置，确保内容...
bootstrap weebox 支持ajax的模态弹出框
12-08
Bootstrap Weebox是一款基于Bootstrap框架开发的模态弹出框插件，专为解决原生Bootstrap模态框功能不足的问题而设计。它不仅具备响应式布局，还支持AJAX加载内容，以及图片预览等丰富的功能。对于原生Bootstrap模态...
css js 弹出框
06-20
css js 弹出框
CSS+HTML5制作弹出框
09-09
自定义基础弹出框，可以在此基础上自定义出各类自己需要的弹出框
CSS3弹出提示框样式代码
11-10
CSS3弹出提示框样式代码 CSS3弹出提示框样式代码 CSS3弹出提示框样式代码 CSS3弹出提示框样式代码 CSS3弹出提示框样式代码
纯css+js实现webApp模态窗口弹出层特效
06-01
NULL 博文链接：https://javaxiaoyetan.iteye.com/blog/2158888
【css】使用css实现提示框各种弹出效果。
qq_2511276124的博客
04-14 3551
最近工作编写页面时，需要有一个提示框从下到上弹出的效果。 冥想了一下，实现了出来。 记录下实现思路。
纯css3弹出框,纯CSS3实现的Lightbox弹出框动效
weixin_28917279的博客
08-03 249
HTML导入代码模板：Launch LightboxLorem Ipsum×Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At ver...
css3 模态框从底部弹出
HXH_csdn的博客
11-21 4705
1.vue <!--弹出框--> <div class="popup"> <div class="mask" v-show="shareType"></div> <div class="share" :style="{bottom: num + 'px'}"> <div class="share-opt bg-color"...
微信小程序 css3底部弹出框
Payne_liu的博客
10-20 424
日常记录： goodsDetails.wxml <button class="button-green" bindtap="addCar" formType="submit">加入购物车</button> <button class="button-red" bindtap="immeBuy" formType="submit">立即购买</button> <view class="modals modals-bottom-dia
CSS3实现3D效果的弹出框
echoyoung46的专栏
06-05 1346
首先，用css3做一个触发弹出框的按钮： border-radius: 10px; /*圆角*/ -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; box-shadow: 10px 10px 5px #888; /*阴影(x,y,w,color)*/ -webkit-
Bootstrap模态弹出框详解与实战教程
本篇笔记主要介绍了Bootstrap框架中的模态弹出框（Modal）功能，它是Bootstrap中一种常见的交互式组件，用于在页面上弹出可关闭的对话框或信息窗口。模态弹出框通常用于显示额外的信息、表单填写或者确认对话等场景...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值