原生html css js（jquery）模态框的实现

最新推荐文章于 2022-11-03 22:56:58 发布
原创 最新推荐文章于 2022-11-03 22:56:58 发布 · 1.2k 阅读 · 11 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何使用原生HTML、CSS和JS（包括jQuery）从零开始构建一个模态框，用于数据的新增和修改。文章详细展示了模态框的HTML结构、CSS样式和JS交互代码。

原生html css js（jquery）模态框的实现

最近在项目上用原生的html css js(jquery)进行页面的开发 有需求要用用到弹出模态框来实现数据的新增和修改，这东西放在vue、react上都会有ui组件的支持，但苦于项目都不是用框架来开发的，就需要自己手动来写一个模态框。
下面是我的模态框的实现
html

<!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-UA-Compatible" content="ie=edge">
    <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
    <link rel="stylesheet" href="./rolemanage.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">
    <title>rolemanage</title>
</head>

<body>
    <!-- 页面总布局 -->
    <div class="wrapper">
        <!-- 页面的头部 -->
        <div class="header">
            <img src="../../image/system-img/logo.png" alt="">
            <span>后台管理系统</span>
            <div class="right">
                <div class="setting">
                    <i class="fa fa-cog" aria-hidden="true"></i>
                    设置</div>
                <div class="logout">
                    <i class="fa fa-power-off" aria-hidden="true"></i>
                    注销</div>
                <div class="name">
                    <i class="fa fa-user-o" aria-hidden="true"></i>
                    谢秀英</div>
            </div>
        </div>
        <div class="nav">
            <span class="crumb">门户主页 / 设置 / 用户角色管理</span><br>
            <span class="edit">用户角色管理</span>
        </div>
        <div class="content">
            <div class="addrole">
                <button onclick="addRole()">新增</button>
            </div>
            <div class="table">
                <div class="thead">
                    <div class="tr">
                        <div class="th">
                            用户名
                        </div>
                        <div class="th">
                            角色名
                        </div>
                        <div class="th edit">
                            操作
                        </div>
                    </div>
                </div>
                <div class="tbody">
                    <div class="tr">
                        <div class="td">
                            陈兰秀
                        </div>
                        <div class="td">
                            财务
                        </div>
                        <div class="td edit">
                            <span onclick="editRole()">编辑</span> | <span onclick="delRole()">删除</span>
                        </div>
                    </div>
                    <div class="tr">
                        <div class="td">
                            吕洋
                        </div>
                        <div class="td">
                            技术经理
                        </div>
                        <div class="td edit">
                            <span>编辑</span> | <span>删除</span>
                        </div>
                    </div>
                    <div class="tr">
                        <div class="td">
                            吕洋
                        </div>
                        <div class="td">
                            技术经理
                        </div>
                        <div class="td edit">
                            <span>编辑</span> | <span>删除</span>
                        </div>
                    </div>
                    <div class="tr">
                        <div class="td">
                            吕洋
                        </div>
                        <div class="td">
                            技术经理
                        </div>
                        <div class="td edit">
                            <span>编辑</span> | <span>删除</span>
                        </div>
                    </div>
                    <div class="tr">
                        <div class="td">
                            吕洋
                        </div>
                        <div class="td">
                            技术经理
                        </div>
                        <div class="td edit">
                            <span>编辑</span> | <span>删除</span>
                        </div>
                    </div>
                    <div class="tr">
                        <div class="td">
                            吕洋
                        </div>
                        <div class="td">
                            技术经理
                        </div>
                        <div class="td edit">
                            <span>编辑</span> | <span>删除</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 页面的蒙层 -->
        <div id="mask" style="display: none;"></div>
        <!-- 新增角色模态框 -->
        <div id="model" style="display: none;">
            <form action="#" method="GET">
                <div class="getName">
                    <input type="text" value="" placeholder="输入用户名" name="username">
                </div>
                <div class="getRole">
                    <select name="role" id="">
                        <option value="">请选择角色</option>
                        <option value="请选择">选择</option>
                    </select>
                </div>
                <div class="operate">
                    <button class="confirm" onclick="confirm()">确定</button>
                    <button class="cancel" onclick="cancel()">取消</button>
                </div>
            </form>
        </div>

    </div>
</body>
<script src="./rolemanage.js"></script>
</html>

css

*{
    padding: 0;
    margin: 0;
}
html,body{
    height: 100%;
    background-color: rgba(228, 232, 240, 0.8);
}
.wrapper {
    margin: auto;
    width: 100%;
    max-width: 1366px;
    min-width: 960px;
    height: 100%;
}

.header {
    position: relative;
    width: 100%;
    height: 50px;
    background-color: #FF5661;
    /* margin-bottom: px; */
    display: flex;
    align-items: center;
    color: #fff;

}

.header img {
    height: 25px;
    width: 40px;
    margin: 0 30px;
}

.header .right {
    position: absolute;
    right: 20px;

}

.header .right div {
    float: right;
    font-size: 14px;
    margin: 0 10px;
    cursor: pointer;
}

.nav {
    width: 100%;
    height: 55px;
    background-color: rgba(255, 255, 255, 0.4);
}

.nav span {
    margin-left: 20px;
}

.nav .crumb {
    height: 20px;
    font-size: 10px;
    line-height: 20px;
    opacity: .4;
}

.nav .edit {
    height: 35px;
    font-size: 16px;
    line-height: 35px;
    color: #FF7533;
    font-weight: bolder;
}

.content {
    margin: 10px;
    margin-bottom: 0;
    background-color: rgba(255, 255, 255, 0.8);
    height: calc(100% - 150px);
    /* height: 100%; */
    padding: 20px;
}
.content .addrole {
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 10px;
}
.content .addrole button{
    width: 65px;
    height: 30px;
    background-color: #FF7002;
    border: 1px solid #FF7002;
    margin: 0;
    padding: 0;
    outline: none;
    font-size: 10px;
    /* margin-right: 20px; */
    border-radius: 5px;
    color: #fff;
}
.thead {
    width: 100%;
    display: flex;
    border-bottom: 1px solid #ccc;
    border-bottom-color: rgba(205, 206, 207, 0.5);
    align-items: center;
}

.tbody .tr,.thead .tr{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    font-weight: bolder;
  
}
.tbody .tr{
    height: 40px;
    border-bottom: 1px solid #ccc;
    border-bottom-color: rgba(205, 206, 207, 0.5);
}
.tr .td,.tr .th {
    flex:8;
}
.tr .edit {
    flex:1;
    cursor: pointer;
    color: #FF7002;
}
.thead .tr .edit {
    display: flex;
    justify-content: center;
    cursor: none;
    color: #000;
}
.content .table .thead{
    height: 45px;
    background-color: rgba(189, 188, 188,0.1);
}
.content .table .tbody {
    font-weight: lighter;
}

/* 蒙层样式 */
#mask {
    width: 100%;
    height: 100%;
    z-index: 2;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: rgba(228, 232, 240, 0.8);
}
/* 模态框的样式 */
#model {
    width: 600px;
    height: 300px;
    z-index: 2;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: rgba(245, 246, 248, 1);
}


/* 模态框内部表单的样式 */


#model form {
    position: relative;
    opacity: 0.6;
    width: 200px;
    margin: 0 auto;
    padding-top: 30px;
}

input[type=text]:focus,
select:focus {
    outline: 0px;
}

input,
select {
    border: none;
    height: 20px;
    /*很关键：将默认的select选择框样式清除*/
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    width: 95%;
    padding-left: 10px;

}

select {
    /*在选择框的最右侧中间显示小箭头图片*/
    background: url("../../image/setting-img/down.png") no-repeat scroll right center transparent;
    /*为下拉小箭头留出一点位置，避免被文字覆盖*/
    padding-right: 14px;
}

select::-ms-expand {
    display: none;
}

.getName {
    /* position: absolute; */
    /* left: 0; */
    margin: 20px 0;
    /* margin-left: -47px; */
    width: 260px;
    height: 24px;
    border-radius: 3px;
    border: 1px solid #ccc;
    border-color: rgba(153, 129, 129, 0.5);
}

.getRole {
    margin: 20px 0;
    /* margin-left: -39px; */
    width: 260px;
    height: 24px;
    border-radius: 3px;
    border: 1px solid #ccc;
    border-color: rgba(153, 129, 129, 0.5);

}

.getName::before {
    content: '用户名 :';
    font-size: 12px;
    margin-left: -47px;
}

.getRole::before {
    content: '角 色 :';
    font-size: 12px;
    margin-left: -40px;

}

.operate button {
    height: 26px;
    width: 64px;
    border-radius: 3px;
    border: 1px solid #FF7002;
    margin: 0;
    padding: 0;
    outline: none;
    font-size: 10px;
    margin-right: 20px;
}


.operate .confirm {
    background-color: #FF7002;
    color: #fff;
}

.operate .cancel {
    background-color: #fff;
    color: #FF7002;
}

js 代码

// 点击添加按钮，打开模态框，显示页面的蒙层
function addRole(){
    console.log($('.mask'))
    $('#mask').css("display",'block')
    $('#model').css("display",'block')
}

// 点击确定按钮，进行数据的提交，关闭模态框，关闭页面的蒙层
function confirm(){
    // 获取输入框的数据
    // 调用后台接口，进行数据的添加
    $('#mask').css("display",'none')
    $('#model').css("display",'none')
}

// 点击取消按钮，关闭模态框，关闭页面的蒙层，将输入框置空
function cancel(){
    // 将将输入框置空

    $('#mask').css("display",'none')
    $('#model').css("display",'none')
}
// 点击编辑按钮，打开模态框
function editRole(){

    $('#mask').css("display",'block')
    $('#model').css("display",'block')
}
// 点击删除进行删除
function delRole(){
    alert("对角色进行删除")
}

效果
在这里插入图片描述
在这里插入图片描述

iziModal：优雅高效的jQuery模态框插件完全指南
a181001_的博客
09-27 703
iziModal作为一款功能丰富且易于使用的jQuery模态框插件，通过其灵活的配置选项、多样的内容加载方式和完整的API接口，能够满足各种现代Web应用的需求。无论是简单的信息提示还是复杂的内容展示，iziModal都能提供优雅且高效的解决方案。其响应式设计和跨浏览器兼容性进一步增强了实用性，而活跃的开发者社区和详细的文档则为学习和 troubleshooting 提供了良好支持。对于已经使用jQuery的项目，iziModal无疑是模态框实现的优秀选择。
Jquery 实现弹出框（模态框）
12-10
Jquery实现模态框，包含对表的修改，删除，详情查看，增加等功能，代码简介，通俗易懂，对该代码原主人表示感谢！
利用html css js 设计一个作品,使用HTML DIV+CSS样式+JavaScript实现自定义个性化的模态窗口...
weixin_33296185的博客
06-02 380
01第一节：什么是模态窗口#JavaScript#什么是模态窗口，是指当模态窗口弹出来的时候，鼠标不能单击这个对话框之外的区域。一般用于给用户一个提示信息，必须关闭模态窗口之后才可以进行其它的操作。图1图1就是一个使用DIV+CSS自定义的一个模态窗口，其优点是个性化强，根据系统要求完全自行设计，而系统窗口是无法做到的。02第二节：CSS 设置一、 position定位在CSS样式中，positi...
原生实现响应式模态框
热门推荐
木槿花开
03-16 1万+
下面采用HTML+CSS+JavaScript实现模态框，并采用Flex布局和多媒体查询实现响应式。 一、模态框HTML代码 模态框实现 模态框展示 模态框标题 × HTML+CSS+JS原生实现响应式模态框演示！ 取消 确定 首先定义模态框的overlayer，然后定义模态框的内容包括head
HTML 模态框
央顺科技官方博客
02-12 3843
HTML 模态框 复制粘贴就能用 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>模态框</title> <link rel="stylesheet" type="text/css" href="modalBox.css"> </head> <style> /*模态框*/ .modal { display
模态框html布局,1模态框.html
weixin_32742203的博客
06-17 288
模态框实现.modal{display: none;width: 100%;height: 100%;position: fixed;left: 0;top: 0;z-index: 1000;background-color: rgba(0,0,0,0.5);}.modal-content{display: flex;flex-flow: column nowrap;justify-content...
jQuery模态框实现及源码分析
使用jQuery实现模态的方式多种多样，可以使用原生的JavaScript结合jQuery提供的方法，也可以使用现成的jQuery插件来快速实现模态功能。常见的模态插件包括jQuery UI Dialog、jQuery Tools、jQuery Modal等。 #### 3...
基于HTML+CSS+JS实现简易模态框效果
本案例“实现简单的模态框效果案例model_window.zip”正是围绕这一核心功能展开的实践项目，通过HTML、CSS与JavaScript三者结合，构建一个结构清晰、样式美观、行为可控的响应式模态框组件。该案例不仅体现了基础...
18种酷炫jQuery模态框实现方式详解
标题“jQuery18种酷炫modal弹出层”和描述“jQuery18种酷炫modal弹出层”指向的是使用jQuery实现不同样式的模态弹出窗口（modal）的技术指南。jQuery是一个快速、小巧且功能丰富的JavaScript库，它简化了HTML文档...
18种酷炫jQuery模态框弹出层效果
从文件结构来看，压缩包中的文件名称列表仅显示为“jQuery18种酷炫modal弹出层”，表明该项目可能包含一个主JS文件（如 jquery.modal.js）、一个配套的CSS文件（如 modal-styles.css），以及若干示例HTML页面用于...
使用HTML5和CSS3制作一个模态框的示例
12-13
本文介绍了使用HTML5和CSS3制作一个模态框的示例，分享给大家，具体如下： 源码示例 可能你并不想看我下面的一堆冗长的说明，想直接查看源码或者一个在线示例。下面的链接，是我使用 CSS3 的 transition（过渡），opacity（不透明度），pointer-event（指针事件）等属性创建的一个功能型模态框。 你可以点击它前往 Github 查看源码： ModalBox-Tutorial HTML 结构 前端的组件都是由业务和交互场景来驱动，模态框也不例外，常见的场景便是进行某个操作，如点击按钮，然后显示一个模态框，反馈给用户或引导用户去执行接下来的交互。一个模态框的交互可能会包含
html原生框架,HTML常用框架
weixin_28285943的博客
05-30 1404
框架一 :: Animate.cssAnimate.css是一个css动画样式库,可以减少我们的开发时间.它预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)等多达70多种动画特效，几乎包含了所有常用的动画特效。重点: 主要是兼容各种浏览器,Animate的底层是靠css实现的...
原生js写的模态框
qq_41555595的博客
04-23 376
HTML代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test</title> <style> #pageMask { visibility: hidden; position: abso...
html原生框架,Framework7 (HTML 移动端框架)
weixin_28882565的博客
05-30 757
Framework7 或者叫 F7 是全功能的绑定 iOS 7 应用的 HTML 框架。Framework7 是免费开源的 HTML 移动端框架，用来开发混合移动端应用或者 iOS 7 的 Web 应用，并且带有 iOS 7 的原生外观和感觉。Framework7 也是独立的原型应用工具。Framework7 使用 Javascript，CSS 和 HTML 来创建 iOS 7 应用，支持多个平台...
原生html中modal,js 原生实现的modal弹出框架
weixin_28913879的博客
06-03 563
```模态框实现h4 {margin-left: 20px;}p {text-align: center;}.btn {width: 100px;height: 35px;border-radius: 5px;font-size: 16px;color: white;background-color: cornflowerblue;}.btn:hover,.btn:focus {backgroun...
html + jquery 原生开发ToDo网页
编程书生的博客
08-06 716
html + jquery 原生开发ToDo网页 相信做前端的大家都见过这个网页吧 TodoMVC Vue的入门网页 今天我用原生html实现一下 首先看一下html部分的代码： <html> <head> <meta charset="utf-8"> <title>幸运记事</title> <link...
点击a标签，做出判断后，使bootstrap模态框弹出，并将标签所在表格行的信息显示在模态框中
ljt9933的博客
06-04 4696
1. 我之前是实现点击表格里某行一个a标签(租借)，然后弹出模态框，并将表格这一行的内容显示在模态框中。 我的表格 1.1 table： <table class="table table-hover"> <caption style="font-size:20px">车辆信息</caption> <thead> <tr> <th style="text-align:center">车辆编号</th>
[JS]让原生JS支持JQ CSS语句
林毅洋
06-17 663
HTMLElement.prototype.css = function () { var option; if (arguments.length > 0) { option = arguments[0]; if (2 === arguments.length) { option = {}, option[arguments[0]] = arguments[1]; }
原生Html，Css的重要知识点
acxgd_ycx的博客
11-03 613
为了制作定制化程度比较高的网站页面，重新复习一下HTML，css相关知识点
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值