<!-- jquery模态框 -->

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        /*隐藏*/

        .hide{

            display:none;

        }

        /*弹出的模态框的样式*/

        .modal{

            position:fixed;

            left:50%;

            top:50%;

            width:500px;

            height:400px;

            margin-left:-200px;

            margin-top:-250px;

            z-index:10;

            background-color:white;

        }

        /*阴影区域的样式*/

        .shade{

            position:fixed;

            left:0;

            right:0;

            top:0;

            bottom:0;

            opacity:0.6;

            background-color:black;

            z-index:9;

        }

        p{

            text-align:center;

        }

    </style>

</head>

<body>

    <input type="button" value="添加">

    <!-- 弹出的模态框的内容，默认隐藏模态框区域 -->

    <div class="modal hide">

        <p>地址：<input type="text"></p>

        <p>端口：<input type="text"></p>

        <p><input type="button" value="取消"></p>

    </div>

    <!-- 弹出模态框时，伴随的阴影部分区域，默认隐藏阴影区域 -->

    <div class="shade hide"></div>

    <div class="container">

        <table border="1">

            <tr>

                <td>1.1.1.1</td>

                <td>80</td>

                <td><input type="button" value="编辑"> | <input type="button" value="删除"></td>

            </tr>

            <tr>

                <td>1.1.1.2</td>

                <td>81</td>

                <td><input type="button" value="编辑"> | <input type="button" value="删除"></td>

            </tr>

            <tr>

                <td>1.1.1.3</td>

                <td>82</td>

                <td><input type="button" value="编辑"> | <input type="button" value="删除"></td>

            </tr>

            <tr>

                <td>1.1.1.4</td>

                <td>83</td>

                <td><input type="button" value="编辑"> | <input type="button" value="删除"></td>

            </tr>

        </table>

    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

    <script>

        //添加按钮事件

        $('input[value="添加"]').click(function(){

            //将.modal和.shade展示出来

            $('.hide').removeClass('hide');

        });

        //取消按钮事件

        $('input[value="取消"]').click(function(){

            $('input[type="text"]').val('');

            //将.modal和.shade隐藏起来

            $('.modal,.shade').addClass('hide');

        });

        //编辑按钮事件

        $('input[value="编辑"]').click(function(){

            $('.hide').removeClass('hide');

            var tds = $(this).parent().prevAll();

            //jquery对象加上索引是dom对象

            $($('.modal input')[0]).val($(tds[1]).text());

            $($('.modal input')[1]).val($(tds[0]).text());

        });

        //删除按钮事件

        $('input[value="删除"]').click(function(){

            //删除对应的<tr></tr>标签

            $(this).parent().parent().remove();

        });

    </script>

</body>

</html>

　　

知识点：

$('input[type="text"]')  ————》》》选择type="text"的input标签。

jQuery实现简单的模态框的更多相关文章

  1. 用jQuery写了一个模态框插件

    用jQuery写了一个模态框插件 大家觉得下面的框框好看么, 水印可以去掉(这个任务交给你们了(- o -)~zZ); "info"框 $("div").con ...

  2. 使用jQuery实现简单的tab框

    html代码 <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta ...

  3. jQuery点击弹出层，弹出模态框，点击模态框消失

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...

  4. 使用bootstrap的插件实现模态框效果

    在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅 ...

  5. 使用bootstrap的JS插件实现模态框效果

    在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅 ...

  6. 基于bootstrap的模态框使用

    使用步骤两步 1:按顺序引入以下三个文件 <link rel="stylesheet" href="../css/bootstrap.min.css"&g ...

  7. 拥Bootstrap入怀——模态框（modal）篇

    置顶文章:<纯CSS打造银色MacBook Air(完整版)> 上一篇:<CSS绘制Android Robot> 作者主页:myvin 博主QQ:851399101(点击QQ和 ...

  8. Html 模态框操作

    <style> #modal-overlay { visibility: hidden; position: absolute; /* 使用绝对定位或固定定位 */ left: 0px; ...

  9. 【html/css】模态框的实现

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  10. jQuery初识之选择器、样式操作和筛选器(模态框和菜单示例)

    一.jQuery 1.介绍 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架). jQuery设计的 ...

随机推荐

  1. openGauss基于4路鲲鹏服务器的性能调优

    1.概述 本文主要描述了在4路鲲鹏服务器上,通过软硬件协同优化配置达到openGauss数据库的极致性能的方法. 主要包括软硬件要求.BIOS配置.网卡配置.磁盘配置.服务器参数设置.数据库参数配置. ...

  2. openGauss3.1.0企业版HA环境部署测试

    前言 openGauss 是华为开源的一款高性能关系型数据库,这两年感觉 pg 系的数据库在国内慢慢火起来了,pg 的操作还是跟 mysql 和 oracle 略有差距,还得慢慢学,先从部署开始吧.对 ...

  3. HarmonyOS实践之应用状态变量共享

      平时在开发的过程中,我们会在应用中共享数据,在不同的页面间共享信息.虽然常用的共享信息,也可以通过不同页面中组件间信息共享的方式,但有时使用应用级别的状态管理会让开发工作变得简单. 根据不同的使用 ...

  4. 有奖活动 | 以代码之名，写出对Ta的爱

      七夕情人节到了,为了Ta, 你打算用什么方式表达爱? 是包包.鲜花.美酒.巧克力, 还是一封充满爱意的短信? 在HarmonyOS,有一群精致又机智的开发者们,他们#以代码之名,表达爱# 比起鲜花 ...

  5. tensorflow安装-【老鱼学tensorflow2】

    tensorflow版本已经升级到了2.x,其在易用性上大大增强,主要是由于API采用了keras的方式,大大简化了开发工作. 安装 pip3 install tensorflow 验证 输入如下代码 ...

  6. setTimeout(fn, 0) // it works - JavaScript 事件循环 动画演示

    在前端代码中很经常看到使用 setTimeout(fn, 0),如下面代码所示,乍一看很多余,但是移除了可能会出现一些奇奇怪怪的问题.要解释这个就需要理解 事件循环(Event Loop),下面会通过 ...

  7. 力扣1620(java&python)-网络信号最好的坐标（中等）

    题目: 给你一个数组 towers 和一个整数 radius . 数组  towers  中包含一些网络信号塔,其中 towers[i] = [xi, yi, qi] 表示第 i 个网络信号塔的坐标是 ...

  8. MaxCompute同步数据的网络配置

    MaxCompute可以通过数据集成加载不同数据源(例如:MySQL数据库等)数据,同样也可以通过数据集成把MaxCompute的数据导出到各种业务数据库.数据集成功能已经集成到DataWorks作为 ...

  9. Flink 助力美团数仓增量生产

    简介: 本文由美团研究员.实时计算负责人鞠大升分享,主要介绍 Flink 助力美团数仓增量生产的应用实践.内容包括:1.数仓增量生产:2.流式数据集成:3.流式数据处理:4.流式 OLAP 应用:5. ...

  10. [ML] 数据预处理 - 特性归一化的目的

    简而言之,归一化的目的就是使得预处理的数据被限定在一定的范围内(比如[0,1]或者[-1,1]), 从而消除奇异样本数据导致的不良影响. 是否归一化主要在于是否关心变量取值. Tool:ChatAI ...