JavaScript弹窗

最新推荐文章于 2024-08-22 14:32:34 发布

✘155

最新推荐文章于 2024-08-22 14:32:34 发布

阅读量110

点赞数 2

本文链接：https://blog.csdn.net/qq_69907434/article/details/134781139

版权

1.案例需求

通过html,css和JavaScript,运用盒子的隐藏，实现弹窗的出现和隐藏。

2.编程思路

1.创建一个按钮，用来控制弹窗的弹出。
2.创建一个宽高均为100%的窗口盒子，做为弹窗背景。
3.在窗口盒子中创建一个盒子，作为弹窗的主体，并将"X"放在合适的位置用来关闭弹窗。

3.案例源码

html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>弹窗</title>
    <link rel="stylesheet" href="css/chuang.css" />
  </head>
  <body>
    <!-- 弹窗按钮 -->
    <button id="Btn">打开弹窗</button>
    <!-- 弹窗 -->
    <div id="Chuang" class="chuang">
      <!-- 弹窗内容 -->
      <div class="chuang-content">
        <!-- &times  叉叉 -->
        <span class="close">&times;</span>
        <p>666</p>
      </div>
    </div>
    <script src="js/chuang.js"></script>
  </body>
</html>

css:

/* 弹窗 */
.chuang{
    /* 默认为隐藏 */
    display: none;
    /* 固定定位 */
    position:fixed;
    /* 设置在最顶层 */
    z-index: 1;
    left:0;
    top:0;
    width: 100%;
    height: 100%;
    /* 滚动条 */
    overflow: auto;
    /* 窗口背景 */
    background-color: rgba(0, 0, 0,0.4);
}

/* 弹窗内容 */
.chuang-content{
    /* 弹窗背景颜色 */
    background-color: #fefefe;
    /* 弹窗外边距，水平居中 */
    margin:15% auto;
    /* 内边距，让文字与边框拉开距离 */
    padding:20px;
    /* 边框线 */
    border: 1px solid #888;
    /* 设置80%让弹窗的宽度根据页面大小进行变化 */
    width: 80%;
}
/* 关闭按钮 */
.close{
    color:#aaa;
    /* 浮动到左边 */
    float:right;
    font-size: 28px;
}
/* hover-鼠标悬停时的样式
   fcous-获得焦点时的样式
*/
.close:hover,.close:focus{
    color: #000;
    text-decoration: none;
    /* 鼠标变手型 */
    cursor:pointer;
}

// 获取弹窗
let chuangEle=document.getElementById('Chuang');
//获取按钮
let buttonEle=document.getElementById('Btn');
//获取span，用于关闭窗口
let closeEle=document.querySelector('.close');
//点击按钮打开弹窗
buttonEle.onclick=function(){
    chuangEle.style.display='block';
    buttonEle.style.display='none';
}
//点击span的'X'关闭弹窗
closeEle.onclick=function(){
    chuangEle.style.display='none';
    buttonEle.style.display='block';
}
//让用户在点击其他地方的时候也关闭弹窗
window.onclick=function(event){
    //点击“弹窗内容”区域时不算是点击了窗口，不会关闭弹窗
    if(event.target==chuangEle){
        chuangEle.style.display='none';
        buttonEle.style.display='block';
    }
}

4.运行结果

弹窗打开前：

弹窗打开后：
弹窗出现

5.补充(窗口出现动画)

可以在css中的窗口内容标签内加上

   .chuang-content{
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 1s;
    animation-name: animatetop;
    animation-duration: 1s；
    }

在css之前样式的后面加上

@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}
 
@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

就会有窗口出现动画了，让窗口的出现看起啦更加平滑，不那么突兀。

6.技术细节

1.利用“display:none;"和"display:block"实现弹窗的出现和隐藏。
2.利用onclick事件来获取互动信息，实现弹窗的合理出现
3.当用户点击"Btn"按钮时，通过改变"chuangEle"的style.display属性来显示模态对话框。当用户点击"close"按钮或模态对话框之外的任何地方时，通过改变"chuangEle"的style.display属性来隐藏模态对话框。

7.小结

今天展示了如何使用JavaScript和HTML来创建一个模态对话框（modal）。模态对话框是一个覆盖在网页上的透明层，通常用于显示重要信息或收集用户输入。此外，代码中还包含一些CSS样式来设置模态对话框的外观和布局。例如，设置了模态对话框的背景颜色、透明度、尺寸和位置等。总之，该代码示例演示了如何使用JavaScript和HTML创建一个基本的模态对话框，并展示了如何通过点击按钮来控制其显示和隐藏。

✘155

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript弹窗

3.在窗口盒子中创建一个盒子，作为弹窗的主体，并将"X"放在合适的位置用来关闭弹窗。通过html,css和JavaScript,运用盒子的隐藏，实现弹窗的出现和隐藏。就会有窗口出现动画了，让窗口的出现看起啦更加平滑，不那么突兀。2.创建一个宽高均为100%的窗口盒子，做为弹窗背景。1.创建一个按钮，用来控制弹窗的弹出。可以在css中的窗口内容标签内加上。在css之前样式的后面加上。
复制链接

扫一扫