开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js点击超链接弹出加载框

在JavaScript中，实现点击超链接时弹出加载框的功能，通常会涉及到以下几个基础概念：

基础概念

事件监听：JavaScript允许你在HTML元素上绑定事件监听器，以便在特定事件发生时执行代码。
DOM操作：JavaScript可以动态地修改HTML文档的内容和结构。
异步编程：在处理可能需要一段时间的操作（如网络请求）时，异步编程可以防止页面冻结。

实现步骤

HTML结构：创建一个超链接和一个用于显示加载框的元素。
CSS样式：定义加载框的样式。
JavaScript代码：添加事件监听器，在点击超链接时显示加载框，并在操作完成后隐藏加载框。

示例代码

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Click Link with Loading</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <a href="#" id="myLink">Click Me</a>
    <div id="loading" class="loading">Loading...</div>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

.loading {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px 20px;
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

JavaScript (script.js)

document.getElementById('myLink').addEventListener('click', function(event) {
    event.preventDefault(); // 阻止默认的链接跳转行为
    var loading = document.getElementById('loading');
    loading.style.display = 'block'; // 显示加载框

    // 模拟异步操作，例如网络请求
    setTimeout(function() {
        loading.style.display = 'none'; // 隐藏加载框
        alert('Link clicked!'); // 这里可以替换为实际的跳转逻辑
    }, 2000); // 2秒后执行
});

解释

HTML：创建了一个超链接和一个隐藏的加载框。
CSS：定义了加载框的样式，使其在页面中央显示。
JavaScript：
- 使用addEventListener为超链接添加点击事件监听器。
- 在点击事件中，首先调用event.preventDefault()阻止超链接的默认跳转行为。
- 显示加载框。
- 使用setTimeout模拟一个异步操作（如网络请求），2秒后隐藏加载框并执行实际的跳转逻辑（这里用alert代替）。

应用场景

数据提交：在用户提交表单时显示加载框，防止重复提交。
页面跳转：在页面跳转或加载新内容时显示加载框，提升用户体验。
异步请求：在进行AJAX请求时显示加载框，告知用户正在处理请求。

可能遇到的问题及解决方法

加载框不显示：
- 确保CSS样式正确应用。
- 确保JavaScript代码正确执行，没有语法错误。
- 确保事件监听器正确绑定到元素上。

加载框不隐藏：
- 确保异步操作完成后正确调用隐藏加载框的代码。
- 检查是否有错误导致异步操作未完成。

通过以上步骤和示例代码，你可以实现点击超链接时弹出加载框的功能，并根据具体需求进行调整和优化。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

小程序点击按钮弹出可填写框

这是项目里面一个简单的效果，小程序点击按钮弹出可填写框，摘下代码，方便之后遇到的时候可以直接拿来使用。效果如下： ? wxml <!....col-1 { -webkit-box-flex: 1; box-flex: 1; } .fl { float: left; } .fr { float: right; } js...// pages/leftSwiperDel/index.js Page({ data: { showModalStatus: false }, onLoad: function(...options) { // 页面初始化 options为页面跳转所带来的参数 this.tempData(); }, // 自定义弹框 deployed: function...pace: "¥151", }, ] // this.setData({ list: list }); }, // 弹框

3.4K1 0

js弹出框、对话框、提示框、弹窗总结

js弹出框、对话框、提示框、弹窗总结一、JS的三种最常见的对话框 [javascript] view plain copy //====================== JS...最常用三种弹出对话框 ======================== //弹出对话框并输出一段提示信息 function ale() { //弹出一个对话框...; } //弹出一个询问框，有确定和取消按钮 function firm() { //利用对话框返回的值（true 或者 false） if (confirm...{ alert(“点击了确定”); } else { alert(“点击了取消”); }...alert(“欢迎您：” + name) } } 二、点击按钮时常用的6中提示框和操作 [html] view plain

17.4K3 0

js中三种弹出框

，可以利用这些对话框来完成js的输入和输出，实现与用户能进行交互的js代码。...今天小编就来简单介绍一下js中的三种弹出对话框，小编先单独对这几个方法进行详细讲解，接着，将这几个方法进行对比，好了，开始我们的js之旅吧`(*∩_∩*)′…… 第一种：alert()方法 alert...，效果如下；在页面上弹出对话框并显示一句话“上联：山石岩下古木枯”，单击“确认”按钮后再显示第2个对话框并显示“白水泉边少女妙！”...注意：两个对话框是分别显示的，而不是一个覆盖另一个，这是因为js实在执行完第一个alert()并等到用户点击“确认”按钮之后才去执行第二个alert()的。...看下面一个小例子：在页面上两次弹出提示对话框，使用户能输入有关信息，代码如下： ?

9.7K5 0

JS-DOM2级封装练习题--点击登录弹出登录对话框

} } // 显示登录层函数 function showLogin() {//普通的通过js操作css样式的代码，只不过定义成了一个函数封装起来一会方便调用。...隐藏登录层函数 function hideLogin() { // 执行代码 login_box.style.display = "none"; } //点击登录按钮显示登录层...(login_btn,'click', showLogin);//调用函数，传三个参数，分别是要承载、执行事件的按钮id变量名，事件名称-不加on，触发这个事件后会调用或执行的函数（名） //点击关闭按钮隐藏登录层

3.7K7 0

如何在Vue.js中创建模态框(弹出框)

开篇模态框（弹出层对话框，Modal Popup）在大多数现代应用程序中非常常见。它们主要用于呈现简洁的信息，非常适合显示广告和促销内容。...此外，我们还将实现一个功能，允许用户在模态框区域外点击以关闭它。...具有“popup”类的最外层div用作模态框的背景。 @click.self="closeModal"事件监听器附加到背景上，允许在其内容之外点击时关闭模态框。...- isOpened: 这是一个布尔变量，初始值为false，表示弹出窗口是否打开或关闭。按钮点击事件模板中有一个带有点击事件监听器（@click）的元素。...当按钮被点击时，它会切换isOpened变量的值，从而有效地打开或关闭弹出窗口。导入弹出框组件代码导入了一个弹出组件（Popup.vue）。在模板中，使用v-if条件渲染弹出窗口组件。

8242 0

后视镜加热按键图标_js点击按钮弹出图片

如下图： JS源代码： /** * JavaScript脚本实现回到页面顶部示例 * @param acceleration 速度 * @param stime 时间间隔 (毫秒) **/ function

27.8K2 0

DIV+JS+CSS实现点击弹出图片效果

前几天扒了vue vlog的官网，想给添加一个像博客一样的点击微信图标弹出公众号二维码。...FFFFFF; z-index: 1002; /* 数字的大小指明了div的相对层，数字大的在上层 */ overflow: auto; } Select Code Copy js

26.2K3 0

评论框鼠标点击特效js代码

效果可以看本博客的评论框 [collapse title="特效JS代码"] (function webpackUniversalModuleDefinition(a,b){if(typeof exports...;POWERMODE.shake=false;document.body.addEventListener("input",POWERMODE); [/collapse] 将其上面代码复制进一个新建的js...JS文件路径)"> 博主只在目前使用的模板测试成功使用，其他模板自测。

10.1K5 0

vue中js全局鼠标点击弹出文字

前作者:一碗单炒饭在原作者代码的基础上进行修改,将内容放入数组,可按序显示或随机展示增加userSelect样式,快速点击时文字不会被选中可以使用Emoji ????????...elem.style.opacity = (150 - increase) / 120; }, 8); }, 70); $body.appendChild($elem); }; }; 在main.js.../static/js/mouseClick' Vue.use(mouse)

7.3K3 0

vue中点击屏幕其他区域关闭自定义div弹出框

function (e) { let dom = $('.myDiv')[0]; // 自定义div的class if (dom) { // 如果点击的区域不在自定义

2.5K1 0

js单击输入框后弹出提示信息效果

http-equiv="Content-Type" content="text/html; charset=gb2312" /> js...,zzjs,zzjs.net,sky,www.zzjs.net,站长特效网" /> js...大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" /> 单击输入框后给出提示效果，sky整理收集。 js特效，本站收集大量高质量js代码，还有许多广告代码下载。...zzjs.net，站长js特效。 <!

11.1K5 0

iOS开发：实现点击常用控件弹出地区选择框（万能方法）

前言在iOS开发中会遇到一些选择选项的需求，而且点击一个控件弹出一个选择框，选择之后展示到前端，然后再把选择的内容传给后台或者做本地存储。...随后还会分享实现点击UITextField弹出UIDatePicker日期选择器的博文，本篇博文只分享点击控件弹出选择框的方法实现（点击UIButton或者UILabel弹出选择提示框）。...以下案例使用场景：通过点击UITableViewCell，弹出弹框，然后选择地区，最后给cell上面的控件赋值。具体步骤如下所示。...indexPath.row]; cell.detailTextLabel.text = _changeRegion; // 地区赋值 return cell; } } 3、地区选择弹出框的实现方法...} } 实现之后的效果如下图所示： 1.png 这里虽然介绍的是cell的点击事件的弹框处理，其他控件的使用方法类似，比如UIButton、UILabel等控件都可以这样实现地区弹框的选择方法

1.7K3 2

uni-app点击按钮底部弹出提示框-uni.showActionSheet(OBJECT)

id=showmodal 从底部向上弹出操作菜单示例 uni.showActionSheet({ itemList: ['A', 'B', 'C'], success: function...res.tapIndex + 1) + '个按钮'); uni.showToast({ title: '点击了第...} }); }, }, } 效果：点击按钮底部弹出提示框...可以选择提示框的相对应的内容

6.8K2 0

JS示例02-点击按钮改变文本框值

一、知识要点 1、属性控制 2、点击事件提取二、源码参考点击

12.7K2 0

js中怎么使点击按钮后文本框获得焦点

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/112375.html原文链接：https://javaforall.cn

9.5K2 0

uni-app点击按钮弹出提示框-uni.showModal(OBJECT),选择确定和取消

content: '这是一个模态弹窗', success: function (res) { if (res.confirm) { console.log('用户点击确定...'); } else if (res.cancel) { console.log('用户点击取消'); } } }); test.vue...function(res) { if (res.confirm) { console.log('用户点击确定...'); } else if (res.cancel) { console.log('用户点击取消'...，会弹出一个提示框

15.5K7 0

bootstrap模态框动态赋值， ajax异步请求数据后给id为queryInfo的模态框赋值并弹出模态框（JS）…

, data : { "type" : "query", "id" : id }, // 成功后开启模态框...function() { alert("请求失败"); }, dataType : "json" }); } // 查询成功后向模态框插入数据并开启模态框...data.useperson); $("#handleperson1").val(data.handleperson); $("#admini1").val(data.admini); // 显示模态框

7.4K2 0

css与js写的原生modal 框，点击页面其他地方渐变消失

"border-right: solid 1px #E5E5E5;"> 点此弹出...height: 100%; width: 100%; position: fixed; z-index: 9998; } JS

3104 0

如何使用JavaScript实现在线Excel附件的上传与下载？

答案是肯定的，不过和本地不同的是，Web端不会直接打开附件，而是使用超链接单元格的形式来显示，今天小编将为大家介绍使用前端HTML+JS+CSS技术通过超链接单元格的形式实现在线Excel附件上传、下载和修改的操作...使用JS实现附件上传实现的方式分为四个步骤： 1.创建前端页面 2编写暂存附件信息的方法 3.编写附件文件清除的方法 4.编写文件保存和文件加载的方法 1.创建前端页面核心代码： <div style...command:'downloadAttachFile', }, GC.Spread.Sheets.SheetArea.viewport); } 在这里，我引入了三方组件库FileSaver，在点击超链接单元格时...").onclick = function(){ // 加载已保存文件 spread.fromJSON(submitFile) } 实现功能和效果：在需要在某个单元格中上传附件时，我们可以弹出一个模态框...，在模态框中上传文件，点击提交之后，可以对文件做一个暂存，将文件信息存储在单元格的Tag中，点击单元格可以下载文件。

1331 0

弹出层之1：JQuery.Boxy (一)

文件：jquery.boxy.js;1个css文件;还有4个图片用于构成弹出层的4个圆角。...">3.1、点我就会弹出一个对话框我是超链接弹出来的 a标签中的 title如果不设置，弹出的框将没有标题且不能拖动.../default.aspx" class="boxy" title="提示">3.2、加载一个文档，显示为提示信息 href超链接到要弹出显示内容的文件。...3.3、提交时以确认框形式弹出 $(function() { $(".boxy").boxy();...，该属性为弹出框的显示信息，默认为：“请确认：” 3、每个匹配锚title属性将被用来作为其相应的对话框的标题 4、message的内容的display属性都将设置为block(显示为块) 下载本文示例

2.9K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭