如何实现点击按钮弹出新页面?_服务器知识

ammii所说的这个方法在绝大部分情况是可以的，但在某些虚拟主机上，禁止没有实际内容的表单提交，因此，空表单在提交时不会转入“弹出页.htm”中去(有点不可想像，但实际上就是这样的，我遇到好几个公司的空间是这种情况)。

比较大众化的按钮弹出新窗口的代码是:

<input

type="button"

value="点我试试"

onClick="window.open('弹出页面.htm','blank_','scrollbars=yes,resizable=yes,width=650,height=450')">

其实，还有一些方法，例如使用onclick属性的

local.href来实现。

弹窗内容

</div>

通过fixed定位实现, ".mask-box" 模拟背景,".dialog-box"作为弹窗容器，里面写弹窗的内容。

通过控制样式，切换 display:block display: none实现点击出现、点击关闭弹窗。

.mask-box{

/* 切换 display:block display: none*/

position: fixed

left: 0

right: 0

top: 0

bottom: 0

background:rgba(0,0,0,0.7)

z-index: 98

}

.dialog-box{

/* 切换 display:block display: none*/

position: fixed

left: 50%

top: 50%

transform: translate(-50%,-50%)

width: 300px

height: 200px

background: #fff

/* 按实际情况设置z-index */

z-index: 98

}

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html，输入问题基础代码。

2、在index.html中的<body>标签中，输入js代码：

function fun() {

alert('click success!')

}

3、浏览器运行index.html页面，此时点击按钮弹出了提示框。

欢迎分享，转载请注明来源：夏雨云

如何实现点击按钮弹出新页面?