相信在平时的前端书写过程中，想要弹出一个框的话就用最简单的alert语句就能实现，那么如果要抛开后端抛开数据库，仅仅只用原生的js怎么实现一个弹框并且这个弹框会自动给你加东西呢呢？
你需要写两个html。
第一个：
<!DOCTYPE HTML>
<html>
<head>
<meta charset='utf-8'>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
</head>
<body>
<div class='wrap'>
<input id='name' type='text'>
<div class='button'>传递</div>
<script>
var oName=document.querySelector('#name');
var val='';
var oBtn=document.querySelector('.button');
var Url=location.href;
var str=Url.replace(/start\.html/,'end.html')
console.log(str)
oBtn.onclick=function(){
val=oName.value;
console.log(location.href);
window.open(str+'?code='+val);
}
</script>
</body>
</html>
第二个页面：
<!DOCTYPE HTML>
<html>
<head>
<meta charset='utf-8'>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
</head>
<body>
<script>
window.onload=function(){
var Url=location.href;
var name=decodeURI(Url.match(/code=(\S*)/)[1])
alert(name+'我爱你')
}
</script>
</body>
</html>
分享到：
相关推荐
本篇文章将深入探讨如何使用原生JavaScript和CSS来创建一个自定义的H5弹框，无需依赖任何外部库，如jQuery或Bootstrap。通过这种方式，我们可以更好地控制弹框的样式和行为，同时减少页面加载的依赖。 首先，我们...
SYSBOXUPS1.2弹窗盒子，是本人独立开发的后台通用系统SYSUI的扩展js插件，纯js,不依赖jquery库。经测试，支持IE6，7，8，IE,360,火狐，谷歌，safari等主流浏览器，支持移动端,支持扩展。是一款不错的前端弹窗插件。 ...
本主题将深入探讨如何使用原生JavaScript实现一个具备19种不同类型的对话框插件，同时支持对话框的拖动功能。我们将讨论以下几个关键知识点： 1. **DOM操作**： 在创建和管理对话框时，DOM操作是必不可少的。...
综上所述，"非常好的js弹框"这个资源提供了创建自定义弹框的一个实例，结合index.html、iframe.html和pop.js，我们可以学习如何利用JavaScript、HTML和CSS构建一个功能完善的弹框系统，以及如何通过IFrame实现内容的...
在本文中，我们将深入探讨如何使用JavaScript创建一个日期弹框，并探讨相关的技术和最佳实践。 首先，JavaScript提供了多种库和框架，如jQuery UI、Bootstrap Datepicker和Moment.js等，可以帮助我们轻松实现日期...
在给定的标题“原生js easydialog.js弹窗控件多种拖动弹出框效果代码”中，我们可以理解这是一个基于JavaScript实现的弹窗插件——easydialog.js。这个插件专注于提供可拖动的、多样的弹出框效果，增强了用户体验。 ...
在本文中，我们将深入探讨如何使用JavaScript和CSS来实现一个具有上下左右弹框划出效果的交互式界面。这种效果通常用于创建引人注目的用户体验，例如弹出对话框、菜单或者通知。以下是一个简单的实现步骤和关键代码...
在本例中，我们探讨了如何使用原生JavaScript实现一个弹出层，并且确保弹出层中的内容窗口居中显示在浏览器视口中。本例提供了一个不同于网上常见实现方式的参考，强调了居中显示的两种方法：水平居中和垂直居中。 ...
"超逼真的仿腾讯预警消息弹框效果"是一个关于模拟腾讯软件中常见的预警通知弹框的项目。这种弹框通常用于提醒用户一些重要的系统信息或警告，设计得既直观又具有吸引力。 腾讯的预警消息弹框以其简洁明了的样式和...
JavaScript弹框控件是网页开发中的一个重要组成部分，它允许开发者以更加美观和交互性更强的方式向用户展示信息或获取用户输入。传统的JavaScript弹框如`alert()`、`prompt()`和`confirm()`虽然功能简单，但在现代...
jQuery是一个轻量级的JavaScript库，它封装了大部分常见的DOM操作，如选择元素、事件处理、动画效果等，使得开发者能够更高效地编写JavaScript代码。在jQuery中，弹框通常是通过模拟浏览器原生的对话框（如alert、...
总的来说，【H5支付密码弹框插件】是一个方便、易用且可定制的组件，旨在提供一个安全的支付环境，同时满足开发者对用户体验和品牌一致性的需求。通过合理运用和定制，可以有效提升H5应用的支付流程体验，增强用户...
最近做搜索框时发现，ios点击输入框之后，点击软键盘上的 完成 时发现，轻击input就无法唤起软键盘，无法对输入框聚焦，必须长按或重压才行，这边经过测试，发现应该是fastclick.js 引起的冲突，ios11 后修复了移动...
原生JS实现可缩放弹窗
jDialog通常提供更丰富的功能和更美观的样式，相比原生的JavaScript弹框函数，它允许开发者自定义弹框的大小、位置、颜色、按钮等属性，甚至可以添加复杂的交互逻辑。 总的来说，弹框、遮罩层和alert提示在网页开发...
以上就是一个基本的自定义样式弹框实现过程。在实际项目中，可能还需要考虑更多细节，如动画效果、弹框位置的计算、用户交互逻辑等。同时，为了提高代码复用性和可维护性，可以将上述功能封装成一个模块或者使用现有...
在前端开发中，创建一个简单的弹框登录功能是常见的需求，尤其对于个人项目或小型应用来说，这样的设计既直观又实用。在这个“一个简单的前台弹框登录”示例中，我们将探讨实现这一功能的关键知识点。 首先，弹框...
SweetAlert是一款优雅、可自定义且易于使用的JavaScript提示对话框库，它提供了丰富的样式和功能，可以替代浏览器原生的alert、confirm和prompt对话框。这个压缩包文件"SweetAlert实例"包含了`sweetalert.js`和`...
可以直接调用，操作方便，调用代码如下： jConfirm('Can you confirm this，<span am red.</span>?', 'Confirmation Dialog', function(r) { });
- **原生JS方法**：`alert()`，`confirm()`和`prompt()`是JavaScript自带的弹框函数，简单易用但样式固定，无法自定义设计。 - **自定义HTML/CSS/JS**：通过创建HTML元素并使用CSS控制样式，结合JavaScript处理...