js实现简单弹窗效果

最新推荐文章于 2024-06-12 16:19:00 发布
最新推荐文章于 2024-06-12 16:19:00 发布
阅读量4.1k 收藏 6
点赞数 1
分类专栏： javascript 文章标签： javascript 弹窗
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/k_runtu/article/details/80861715
版权
代码
<!DOCTYPE html>
<html>
<head>
    <title></title>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
<style>
.modal-container {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

.modal-mask {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0.5;
}
.modal-alert {
    margin: 0 auto;
    width: 200px;
    opacity: 1;
}
.modal-title {
    text-align: center;
    font-size: 27px;
    background: lightblue;
}
.modal-message {
    padding: 10px 5px;
    background: white;
}
.modal-button {
    width: 100%;
    height: 100%;
    font-size: 22px;
}
.vertical-center {
    top: 50%;
    position: relative;
    transform: translateY(-50%);
}
</style>
</head>
<body>
<div class="modal-container modal-remove">
    <div class="modal-mask"> </div>
    <div class="modal-alert vertical-center">
        <div class="modal-title title">title</div>
        <div class="modal-message">message</div>
        <div class="modal-control">
            <button class="modal-button" type="button" name="button">ok</button>
        </div>
    </div>
</div>
</body>
<script>
    $('.modal-button').on('click', function() {
        console.log('click ok');
        $('.modal-remove').remove();
    })
</script>
</html>
效果

这里写图片描述

ikebo
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
超好看前端css美化弹窗
m0_55410737的博客
07-07 3534
原生弹窗不好看？种类少？那就用这款可自定义的css美化弹窗。 弹窗标题，内容，按钮都可自定义。
js漂亮弹出层代码
weixin_34178244的博客
11-13 495
2019独角兽企业重金招聘Python工程师标准>>> ...
js写一个弹窗消息提醒插件_js好看的消息提示框
最新发布
2401_85124218的博客
06-12 779
技术栈比较搭，基本用过的东西都是一模一样的。快手终面喜欢问智力题，校招也是终面问智力题，大家要准备一下一些经典智力题。如果排列组合、概率论这些基础忘了，建议回去补一下。
使用Vue实现弹窗效果
热门推荐
忧郁的蛋的专栏
11-16 1万+
弹窗效果是在Web开发中经常用到的一种交互效果，它可以在用户点击某个按钮或者触发某个事件时显示一个悬浮框，提供用户与页面进行交互的机会。Vue作为一种流行的JavaScript框架，提供了丰富的工具和方法，可以方便地实现弹窗效果。通过编写弹窗组件和在父组件中使用弹窗组件，我们可以方便地实现网页中的弹窗交互效果。在浏览器中运行这个Vue应用，当点击"显示弹窗"按钮时，弹窗会出现，显示"这是一个弹窗"的内容。在这个父组件中，我们引入了之前创建的弹窗组件。在父组件中，我们可以使用弹窗组件来实现具体的弹窗效果。
【JavaScript】三种方式入手JS弹窗
2401_84092868的博客
04-08 1997
技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。有需要面试题资料的朋友点击这里可以领取。学不完的，最重要的是活着、不秃。
用CSS3动画特效实现弹窗效果
qq_33707636的博客
07-31 4991
CSS3为用户添加了三个特殊效果的处理方式：过渡、动画、变化。当用户和界面元素交互时，使用这些特殊样式可大大改善用户的体验效果。这些效果直接由浏览器引擎处理，可以节省开销。尽管如此，它们也会耗费大量的处理能力，尤其是一些复杂的WEB页面上。即使是最基本的效果，也是如此。本篇的目的只是熟悉下这三种CSS处理效果，不推荐在实际系统中大篇幅使用。 温馨提示：请谨慎大篇幅使用这些特殊效果。 另外一方...
JavaScript实现简单的弹窗效果
11-20
本文实例为大家分享了JavaScript实现弹窗效果的具体代码，供大家参考，具体内容如下 使用css动画效果实现弹窗缓慢弹出和收回。 使用JavaScript实现定时弹出定时收回。 <!DOCTYPE html> <html lang="en"> &...
JS实现自定义弹窗功能
10-18
本文将详细介绍如何使用JavaScript（JS）来实现一个自定义的弹窗功能。 首先，自定义弹窗通常涉及到以下几个核心组成部分： 1. **HTML 结构**： HTML 用于构建弹窗的基本结构，如按钮触发弹窗的元素和弹窗的内容...
js实现弹窗效果
10-14
在JavaScript中实现弹窗效果是一项常见的任务，通常用于提示用户信息、确认操作或者展示详细内容。这个例子展示了如何使用纯JS来创建一个简单的警告弹窗。以下是对标题和描述中所述知识点的详细解释： 1. **HTML...
原生javascript实现图片弹窗交互效果
10-24
在本文中，我们将探讨如何使用原生JavaScript实现图片弹窗交互效果。这个过程涉及多个关键点，包括变量声明、事件处理优化、图片加载管理和自定义选择器功能。 首先，我们来看第一部分，关于变量声明的优化。在...
【JavaScript】三种方式入手JS弹窗(1)
2401_84153270的博客
04-13 575
基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。什么？你问面试题资料在哪里，这不是就在你眼前吗（滑稽。
酷炫弹窗效果
ADH100899的博客
09-02 867
酷炫弹窗效果 HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>弹窗效果</title> <script src="./js/jquery.mi
JS中弹窗效果（详细讲解）、（定时器详细讲解）
weixin_52231266的博客
12-24 1243
说一下前端中我们经常用的样式，比如说在打开网页的时候自动弹出一个提示框，还有js中比较重要的定时器，还有一些基本的js中的对象。 JS弹窗效果： 弹窗的效果对用户具有提示效果： 提示框分为三种： 警告框 提示框 确认框 <script type="text/javascript"> // 确认框 window.confirm("确认"); // alert("haha");警告框 // 在前端中所有的输入框，输入的结果都是字符串类型，如果没有输入默认是空字符串
js实现window 弹窗小案例
云飞
11-07 7975
首先大家先看一下这个小案例的效果图，可能大家刚看到下面这张效果图的时候有点小小的疑惑，小编在这向大家解释下，所谓的window弹窗事件就是在图片的左边有个选择按钮，当我们点击该按钮时候就会弹出右边的图片，在右边的图片大家可以根据自己的喜号去选择左边文本框中要填充的内容，比如一点击102编号所对应的选择，在左边文本框就会填充该选择的内容。 下面给大家讲解下怎么去实现这个弹窗小案例： 首先
js实现页面弹窗
奥特蛋的博客
03-25 1万+
js实现三种页面弹窗 1.alert()弹出个提示框 （确定） <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> function myFunction(){ alert("你好，我是一个警告框！"); } </script> </head> <body> <input type="button" onclick="myFuncti
js实现简单弹出层功能
buside的博客
05-07 2473
<!DOCTYPE html> <html lang='zh'> <head> <meta charset="utf-8"> <title>实现简易弹窗</title> <style> .box-modal{ display: flex; ...
js实现自定义弹窗
weixin_30319153的博客
08-08 2149
　　众所周知，浏览器自带的原生弹窗很不美观，而且功能比较单一，绝大部分时候我们都会按照设计图自定义弹窗或者直接使用注入layer的弹窗等等。前段时间在慕课网上看到了一个自定义弹窗的实现，自己顺便就学习尝试写了下，下面是主要的实现代码并添加了比较详细的注释，分享出来供大家参考。（代码用了ES6部分写法如需兼容低版本浏览器请把相关代码转成es5写法,后面有时间更新为一个兼容性较好的es5版本） HT...
如何在html中利用js实现button的弹窗效果
04-01
以下是一个简单的实现button弹窗效果的HTML和JS代码示例： HTML代码： ```html <button id="popupBtn">点击弹出窗口</button> <div id="popupBox" style="display:none"> <h2>这是弹出窗口</h2> <p>你可以在这个窗口中放置任何内容</p> <button id="closeBtn">关闭</button> </div> ``` JS代码： ```javascript // 获取按钮和弹窗框 var popupBtn = document.getElementById("popupBtn"); var popupBox = document.getElementById("popupBox"); // 获取关闭按钮 var closeBtn = document.getElementById("closeBtn"); // 给按钮绑定点击事件 popupBtn.onclick = function() { // 显示弹窗框 popupBox.style.display = "block"; } // 给关闭按钮绑定点击事件 closeBtn.onclick = function() { // 隐藏弹窗框 popupBox.style.display = "none"; } ``` 在上面的代码中，首先我们定义了一个按钮和一个弹窗框，并且让弹窗框的初始状态为隐藏。然后我们通过JavaScript获取按钮和弹窗框的元素对象，并且通过给按钮绑定点击事件来实现点击弹出弹窗框的效果，同时也给弹窗框中的关闭按钮绑定点击事件来实现关闭弹窗框的效果。最后通过修改弹窗框的样式来实现弹窗框的显示和隐藏。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值