如何使用js实现点击一个按钮之后在原来的页面上弹出一个注册类似的页面，就是类似alert的弹出
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何使用js实现点击一个按钮之后在原来的页面上弹出一个注册类似的页面，就是类似alert的弹出相关的知识，希望对你有一定的参考价值。
参考技术A /*** 显示一个弹出界面
*
* @param url
* 界面地址，可以使jsp，页也可以是action
* @param params
* 需要传递的参数
* @param titleDesc
* 页面头描述
* @param width
* 页面宽度
* @param height
* 页面高度
* @param parentView
* 页面所在的父页面
* @param callback
* 回调函数
*/
function showPage(url, params, titleDesc, width, height, parentView, callback)
var _win = this;
if (!parentView)
parentView = document;
lockScreen_showPage(parentView);
var bordercolor = "#336699";// 提示窗口的边框颜色
var showPageDiv = parentView.createElement("div");
showPageDiv.setAttribute("id", "showPageDiv");
showPageDiv.setAttribute("align", "center");
showPageDiv.style.background = "white";
// showPageDiv.style.border = "1px solid " + bordercolor;
showPageDiv.style.position = "absolute";
showPageDiv.style.left = "50%";
showPageDiv.style.top = "30%";
showPageDiv.style.font = "12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
showPageDiv.style.marginLeft = "-225px";
showPageDiv.style.marginTop = -75 + parentView.documentElement.scrollTop + "px";
showPageDiv.style.width = width + "px";
showPageDiv.style.height = height + "px";
showPageDiv.style.textAlign = "center";
showPageDiv.style.lineHeight = "25px";
showPageDiv.style.zIndex = "10031";
var title = parentView.createElement("h4");
title.setAttribute("id", "showPageTitle");
title.setAttribute("align", "right");
title.style.margin = "0";
title.style.padding = "3px";
// title.style.background = bordercolor;
title.style.filter = "progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
title.style.opacity = "0.75";
// title.style.border = "1px solid " + bordercolor;
title.style.height = "18px";
title.style.font = "12px Verdana, Geneva, Arial, Helvetica, sans-serif";
// title.style.color = "white";
title.style.cursor = "pointer";
title.title = titleDesc;
title.innerhtml = "<table border='0' width='100%'><tr><td width='85%' align='left'><b id='showPageTitleDesc'>"
+ titleDesc + "</b></td><td id='showPageClose' width='15%' >关闭</td></tr></table>";
var pageBody = parentView.createElement("div");
pageBody.setAttribute("id", "pageBody");
pageBody.style.width = width + "px";
if (navigator.userAgent.indexOf("MSIE 6.0") > 0) // IE6
pageBody.style.height = height - 26 + "px";
else // IE8
pageBody.style.height = height - 25 + "px";
pageBody.style.position = "absolute";
pageBody.style.left = "0px";
$.post(url, params, function(data)
showPageDiv.appendChild(title);
showPageDiv.appendChild(pageBody);
parentView.body.appendChild(showPageDiv);
parentView.getElementById("showPageClose").onclick = function()
closeShowPage(parentView);
if (callback)
callback.call(_win);
;
$("#pageBody").html(data);
);
试试调用这个方法追问
这个是用了ajax吧？能写的下完整的html代码吗？
本回答被提问者采纳用js写 有六个按钮点击按钮会变色 然后其他按钮恢复原来的颜色
用js写 有六个按钮点击按钮会变色 然后其他按钮恢复原来的颜色 类似于一个单选 在线等急 谢谢 附上代码 谢谢
可以使用js的css方法实现点击按钮会变色，然后其他按钮恢复原来的颜色。
具体步骤如下：
需要准备的材料分别是：电脑、浏览器、ultraedit。
1、在ue编辑器中新建一个空白的html文件，js文件。
2、在ue编辑器中输入以下html代码。
3、在ue编辑器中输入以下js代码。
4、编辑完成以后，在ue编辑器中点击保存，格式选择UTF8无BOM。
5、在浏览器中打开此html文件，可以看到最终想要点击按钮会变色，然后其他按钮恢复原来的颜色效果。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*
margin: 0;
padding: 0;
li
list-style: none;
float: left;
margin:20px;
input
width: 100px;height: 40px;
input.on
background-color: red;
</style>
</head>
<body>
<div>
<ul>
<li><input type="button" class="on"></li>
<li><input type="button"></li>
<li><input type="button"></li>
<li><input type="button"></li>
<li><input type="button"></li>
<li><input type="button"></li>
</ul>
</div>
<script>
var list = document.getElementsByTagName('input');
for(let i = 0;i<list.length;i++)
list[i].addEventListener('click',function()
for(let i=0;i<list.length;i++)
list[i].removeAttribute('class');
this.setAttribute('class','on')
)
</script>
</body>
</html>
//这是原生js写的，用jq会更简单点
我的事button按钮 class已经有值啦
优惠商家
第二份半价
$(this).addClass('on').siblings().removeClass('on');
)
//思路是一样的，给这个.btn 加一个类名为on的样式，点击button时候给button加class为'on',
//同时移除兄弟节点的button的class为'on'的类名本回答被提问者采纳 参考技术B 思路：
先将六个按钮的颜色都回复原来的，
再将点击的按钮变色就可以了。
code：
let inpDomList = document.querySelectorAll('input')；
for(let i = 0;i<inpDomList.length;i++)
inpDomList[i].classList.remove('aaa');
this.classList.add('aaa') 参考技术C 一个全局变量记录被按下的按钮控件对象1设置所有按钮颜色为灰色2所有按钮的鼠标进入事件相同，检测被按下按钮是否为该按钮，不是的话将该按钮的背景色改为深灰3所有按钮的鼠标移出事件相同，检测被按下按钮是否为该按钮，不是的话将按钮的背景色设置为灰色4按钮点击事件，执行方法1，并将触发事件的按钮背景色设为黑色，将全局变量记录被按下的按钮设置为该按钮可使用sender as button 来获取被点击的按钮
以上是关于如何使用js实现点击一个按钮之后在原来的页面上弹出一个注册类似的页面，就是类似alert的弹出的主要内容，如果未能解决你的问题，请参考以下文章
如何在 aspx 按钮单击上弹出模式并使用 gridview 加载数据？
用jquery代码如何实现当我点击“查看”按钮时，在弹出窗口或弹出页面，显示数据库的详细数据
高分求教：如何实现java web 按钮点击弹出登陆界面，并登陆