jquery实现简易弹窗组件

最新推荐文章于 2024-07-24 11:09:48 发布
最新推荐文章于 2024-07-24 11:09:48 发布
阅读量936 收藏 2
点赞数
分类专栏： 弹窗 文章标签： javascript jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45464608/article/details/105407319
版权

jquery实现简易弹窗组件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      button {
        padding: 10px 50px;
        background-color: #c51a1b;
        border-color: #c51a1b;
        outline: none;
        border-radius: 4px;
        text-align: center;
        color: #fff;
      }
      button:hover {
          background-color: #900;
          transition: all .2s;
      }
      .show {
          display: block;
      }
      .hide {
          display: none;
      }
      .cen {
          position: fixed;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          background-color: rgba(0,0,0,0.5);
          z-index: 123;
      }
      .modal-alert-content {
          position: absolute;
          top: 30%;
          left: 50%;
          transform: translate(-50%,-50%);
          z-index: 124;
          height: 100px;
          width: 100px;
          background-color: yellow;
      }
      .close {
          position: absolute;
          top: 5px;
          right: 5px;
          color: #c51a1b;
          font-size: 20px;
          z-index: 125;
          cursor: pointer;
      }
    </style>
  </head>
  <body>
    <button>弹窗</button>
    <div class="modal-alert hide">
        <div class="cen"></div>
        <div class="modal-alert-content">
            我是弹窗组件的内容
            <div class="close">×</div>
        </div>
    </div>
    <script src="./jquery-3.4.1.js"></script>
    <script>
        $('button').click(function() {
            $('.modal-alert').removeClass('hide').addClass('show')
        })
        $('.cen').click(function() {
            $('.modal-alert').addClass('hide')
        })
        $('.close').click(function() {
            $('.modal-alert').addClass('hide')
        })
    </script>
  </body>
</html>
Chopin大大
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery弹窗插件
weixin_42380289的博客
09-02 237
特别说明：事件需自己绑定，以下只展现调用代码。 //初体验 layer.alert('内容') //第三方扩展皮肤 layer.alert('内容', { icon: 1, skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅 }) //询问框 layer.confirm('您是如何看待前端开发？', { btn: ['重要','奇葩'] //按钮 }, function(){ layer.msg('的确很重要'
轻量级的 jquery 自定义弹窗插件 用法简单
qq_37780279的博客
08-07 489
jq封装 (function () { $.fn.alert = function (e) { var fn = this; $(fn).show(); $(fn).find('i.off').is('.off')?'':$(fn).append('×'); $(this).css({ 'd
JQuery Alert 弹出框美化(Alert, Confirm, & Prompt Replacements)
11-25
JQuery Alert Confirm
jQuery弹出alert对话框插件
ICode联盟
04-02 546
下载地址 一款美化alert弹窗插件，使用jQuery实现的确认对话框，比Windows系统自带的alert弹出对话框样式好看多了。 dd:
jQuery美化alert对话框插件
ICode联盟
04-02 477
下载地址一个界面很酷的jQuery对话框插件,它可以打破所有的设计在你的web页面。Flekialert是一个强大很容易使用的jQuery插件用来美化alet弹出框。 您可以使用Flekialert只要稍微配置下一行代码,甚至对于那些有很少的编程经验的开发人员。 dd: ...
jquery自定义弹出窗alert
weixin_45957302的博客
05-27 2633
jquery自定义弹窗窗
Jquery实现自定义弹窗示例
12-10
在项目开发中，如果我们使用javascript自带的提示对话框，感觉不怎么美观，所以我们通常都是自己定义一些对话框，这里我实现点击按钮就弹窗一个登录的窗口，点击该窗口并可以实现拖拽功能，太多文字的东西说不清楚，...
jQuery实现简单弹窗遮罩效果
10-20
接下来，我们引入 jQuery 库，这是实现弹窗遮罩效果的关键。在 `$(function() {})` 包裹的代码块中，`$(document).ready` 的简写形式，表示当文档加载完成后执行的函数。 1. 当用户点击 `.btn_show` 按钮时，会触发...
jQuery实现网页打开页面即弹窗
01-22
### 四、jQuery实现弹窗 在`js`文件（如`index.js`）中，使用jQuery的`$(document).ready()`函数确保在DOM加载完成后执行弹窗代码： ```javascript $(document).ready(function() { // 页面加载完成后弹出弹窗 $...
jquery封装的漂亮弹窗confirm
06-21
这个基于jQuery的弹窗组件拥有漂亮的外观，良好的兼容性和易用性。
html+jquery实现简洁弹窗
12-31
本项目“html+jquery实现简洁弹窗”聚焦于使用HTML5、jQuery和CSS3来构建这样的功能。下面我们将深入探讨这些技术如何协同工作以实现这一目标。 首先，HTML5作为网页内容的基础结构语言，提供了丰富的语义化标签，...
弹窗组件jqmodal的使用介绍
phplife的电子商务网上商城专栏
04-14 3873
大家在开发中为了有比较好的交互体验，很多时时候要用到各种各样的前端弹窗效果，我在工作中主要经常用到的最简单的一个弹出提示框的组件是: 一、jquery.alert.js jQuery Alert Dialogs Plugin 官网地址是:http://keleyi.com由于现在官网似乎已经打不开了，但阻档不了他的好用，如果有感兴趣的同学可以到 https://gitee.com/ydhcxh/jquery.alert.git下载体验 二、layui的弹窗组件，这个也十分好用，自不用説...
jQuery模态弹窗插件(jquery-confirm)
热门推荐
MingDaw的专栏
10-31 1万+
jquery-confirm组件包含两个资源文件，分别为：样式文件jquery-confirm.min.css和脚本文件jquery-confirm.min.js。jquery-confirm官网地址：https://craftpip.github.io/jquery-confirm/注：jquery-confirm依赖于jQuery，如果你还需要响应式布局，则还依赖Bootstrap。如果你的前端项目中还在使用jQuery，那么jquery-confirm是你模态弹窗的完美选择。
关于jquery的弹窗组件简单封装
qq_28975099的博客
02-23 5690
前言：由于自己工作时多数是基于移动端的页面工程，很多时候都需要用到弹窗组件，网上也有很多好用，五花八门的弹窗插件，但是由于网上各个版本有些功能过于强大，导致插件大小比较大，有些样式不好自己进行各种自定义设计，有些则是达不到自己想要的那种需求，比如实现弹窗按钮的各种回调函数，于是自己就根据公司目前项目的需求 ，自己简单封装了一个弹窗组件。可简单自定义各式各样的样式 思路分析： 声明一个带有对象参数的
Jquery弹窗组件
weixin_34354945的博客
08-27 173
下面是写的简单的Jquery弹窗组件 暂不支持animate,只能满足一般的弹窗显示隐藏需求，更多功能后续会完善！网上及jquery组件很多这样的弹窗，但是用别人的感觉心里过不去，所以就随便写写，当做练习下！代码如下：/** * fileoverview WindowAlert * @desc jQuery弹窗组件 * @param {clickElem} 点击元素 * @param {conta...
JQuery改造alert和confirm弹框
笨小孩
11-20 9557
背景：在有些项目里边，有些弹框样式要定制化，使用插件的弹框无法满足样式需求，这里写一个用jq写的弹框示例。 eg： 使用说明： 1、示例中用到的图片pop_close.png 图片链接 2、将示例代码和上边图片放在同级目录下 3、示例下载地址：https://download.csdn.net/download/qq_21386275/10796842 4、效果图如下 &amp;amp;lt;!DOCTY...
JQuery的Alert插件介绍
白杨
07-18 865
1: 2: script src="/path/to/jquery.js" type="text/javascript">script> 3: "/path/to/jquery.ui.draggable.js" type="text/javascript"> 4: 5: "/path/to/jquery.alerts.js" type="text/ja
【React 】开发环境搭建详细指南
最新发布
lph159的博客
07-24 1146
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
jquery实现简易计算器
06-27
jQuery实现简易计算器是一个常见的前端开发练习，通常使用JavaScript和jQuery库来增强用户界面的交互性。以下是一个简单的步骤来创建一个基本的加减乘除计算器： 1. 引入jQuery：首先在HTML文件中引入jQuery库，因为我们将利用其事件处理和DOM操作功能。 ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> ``` 2. HTML结构：定义计算器的HTML布局，包括数字按钮、运算符按钮和结果显示区域。 ```html <div id="calculator"> <input type="text" id="display" disabled> <div class="buttons"> <!-- 数字按钮 --> <button>1</button> <button>2</button> <button>3</button> <!-- ... --> <button>.</button> <button>=</button> <!-- 运算符按钮 --> <button>+</button> <button>-</button> <button>*</button> <button>/</button> </div> </div> ``` 3. jQuery代码：添加事件监听器来处理点击事件，根据按钮类型执行相应的计算或更新显示。 ```javascript $(document).ready(function() { // 获取显示元素 const display = $('#display'); // 遍历数字按钮 $('.buttons button').click(function() { const value = $(this).text(); if (!isNaN(value)) { // 如果是数字 display.val(display.val() + value); } else { // 如果是运算符 display.val(display.val() + ' ' + value); // 保留空格，以便显示运算符 } }); // 处理等于号按钮 $('#=').click(function() { try { const result = eval(display.val()); display.val(result); } catch (error) { display.val("Error"); } }); }); ``` 4. 注意事项： - 使用`eval()`函数存在安全风险，因为它会执行任意的JavaScript代码。在实际应用中，应采用更安全的方式（如设计一个解析器）来处理用户输入。 - 上述代码没有处理清除、小数点和括号等功能，这将增加实现的复杂性，但基本思路类似。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值