用原生js写一个弹框 博客分类： 原声 js 弹框 html 弹框
程序员文章站
2024-03-21 11:27:16
...
相信在平时的前端书写过程中，想要弹出一个框的话就用最简单的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>