当前位置：首页 » 编程语言 » html点击弹出

html点击弹出

发布时间: 2021-03-28 13:07:21

Ⅰ html文档中如何实现点击链接弹出新页面

<a
href="这里写自你要链接的地址"
target="_blank">这里写你要在页面上显示的文字</a>
如<a
href=“www..com"
target="_blank">网络</a>

Ⅱ html点击按钮弹出窗口如何实现

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}

.firstBox h5 {
font-size: 30px;
color: #000;
font-weight: 700;
}

.firstBox table {
border: 1px solid #E6E6E6;
margin: 15px 0px;
}

.firstBox table thead {
background: #E6E6E6;
}

.firstBox table tr td {
width: 150px;
text-align: center;
}

.firstBox button {
width: 100px;
height: 40px;
background: #E6E6E6;
border: 1px solid #C7D3E6;
text-align: center;
line-height: 40px;
font-size: 16px;
color: #000;
cursor: pointer;
}

#twoBox {
margin: 20px 0px 0px;
background: #E6E6E6;
height: 250px;
width: 310px;
position: relative;
display: none;
}

#twoBox .twoBox_lever {
width: 290px;
height: 230px;
background: #fff;
border: 1px solid #ccc;
border-radius: 5px;
position: absolute;
right: 0;
top: 0;
left: 0;
bottom: 0;
margin: auto;
}

.twoBox_lever_two {
width: calc(100% - 10px);
height: calc(100% - 10px);
padding: 5px;
}

.twoBox_lever_two .two_title {
width: 100%;
height: 40px;
background: #E6E6E6;
border: 1px solid #ccc;
border-radius: 5px;
}

.twoBox_lever_two .two_title p {
font-size: 16px;
color: #000;
line-height: 40px;
padding-left: 10px;
font-weight: 700;
}

.twoBox_lever_two form {
width: calc(100% - 20px);
margin: 10px;
border-bottom: 1px solid #ccc;
height: calc(100% - 100px);
}

.twoBox_lever_two form input {
height: 20px;
line-height: 20px;
padding: 0px 10px;
margin: 5px;
cursor: pointer;
}

.twoBox_lever_two .two_footer {
height: 40px;
text-align: right;
padding-right: 10px;
}

.twoBox_lever_two .two_footer button {
height: 30px;
background: #E6E6E6;
border: 1px solid #C7D3E6;
text-align: center;
line-height: 30px;
font-size: 16px;
color: #000;
cursor: pointer;
}

.twoBox_lever_two .two_footer button:first-of-type {
width: 120px;
padding: 0px 10px;
}

.twoBox_lever_two .two_footer button:last-of-type {
width: 50px;
}

.show {
display: block !important;
}
</style>
</head>
<body>
<div style="margin:10px;">

<div class="firstBox">
<h5>已有的用户：</h5>
<table>
<thead>
<tr>
<th>名字</th>
<th>邮箱</th>
<th>密码</th>
</tr>
</thead>
<tbody>
<tr>
<td>姓名</td>
<td>[email protected]</td>
<td>xingtuan</td>
</tr>
</tbody>
</table>
<button id="button">创建新用户</button>
</div>

<div id="twoBox">
<div class="twoBox_lever">
<div class="twoBox_lever_two">
<div class="two_title">
<p>创建新用户</p>
</div>
<form>
<label style="float:left">名字：
<input type="text" placeholder="请输入名字">
</label>
<label style="float:left">邮箱：
<input type="text" placeholder="请输入邮箱">
</label>
<label style="float:left">密码：
<input type="password" placeholder="请输入密码">
</label>
</form>
<div class="two_footer">
<button>创建一个用户</button>
<button>取消</button>
</div>
</div>
</div>
</div>

</div>
</body>
<script>
window.onload = function () {
document.getElementById("button").onclick = function () {
document.getElementById("twoBox").classList.add("show")
}
}
</script>
</html>

Ⅲ html点击按钮怎么弹出一个浮动的窗体

首先根据需求我们需要一个按钮，一个弹出窗口层；
OK，废话不多说；
按钮版就用一个基本的：权
<button class="btn">Click me</button>
<div class="dialog">我是浮动的窗口</div>

我们要给浮动层设置一下样式
.dialog{width:200px;height:200px;border:solid 1px #000;position:absolute;right:10px;top:100px; line-height:200px;text-align:center;display:none}

OK ,下面就是JS部分：
首先需要引入一个JS库，版本自己定义：
然后给按钮添加相应的点击事件，让点击button的时候，显示出浮动层
$(".btn").click(function(){
$(".dialog").show(100)
})

Ⅳ html中怎么点击超链接弹出消息

<a href="#" onclick="javascript:alert('弹出消息')">超链接</a>
建议提问者查阅一些js的相关资料。
从下面的选项中
onclick="javascript:【alert('弹出信息')】"
将【】中的内容进行替换
警告框：alert('警告内容') 弹出信息框提醒用户某些星系
输入框：prompt('请输入您的姓名','小花') 弹出一个框可供用户输入信息
确认框：confirm('您确定要离开页面吗？') 用户选择“否”，需要编码者进行后续判断

这些问题，你可以上一些技术网站，很容易查询到。我一般上w3school 这个网站很不错。

Ⅳ html点击按钮怎么弹出一个浮动的窗体

首先根据需求我们需要一个按钮，一个弹出窗口层；
OK，废话不多说；
按钮就用一个基本的：
<button class="btn">Click me</button>
<div class="dialog">我是浮动的窗口</div>

我们要给浮动层设置一下样式
.dialog{width:200px;height:200px;border:solid 1px #000;position:absolute;right:10px;top:100px; line-height:200px;text-align:center;display:none}

OK ,下面就是JS部分：
首先需要引入一个JS库，版本自己定义：
然后给按钮添加相应的点击事件，让点击button的时候，显示出浮动层
$(".btn").click(function(){
$(".dialog").show(100)
})

Ⅵ html点击按钮弹出注册页面

我的思路是：设置注册的<div>初始时隐藏的，里面写好各种表单，当点击页面注册按钮时，让初始隐藏的<div>显示在最上面，

Ⅶ html网页中点击按钮,弹出一图片来

<script>
window.onload=function ()
{
  var oDiv=document.getElementById('div');
  var oBtn=document.getElementById('btn');
  
  oBtn.onclick=function ()
  {
    oDiv.style.display='block';
  }
  
  oDiv.onclick=function ()
  {
    this.style.display='none';
  }
]
</script>
<style>
#div{width:100px; height:100px;background:red; position:absolute; left:50%; top:50%; margin:-50px 0 0 -50px;}
</style>

//下面是body里的部分

<div id="div"></div>

<input type="button" value="点击" id="btn"/>

以上是一个简单的点击按钮弹出一个居中的DIV，点击DIV则让这个DIV隐藏

Ⅷ html里点击按钮弹出框带选项怎么实现

首先打开计算机，单击开始，然后在弹出的选项栏内找到“运行”选项并单击。

Ⅸ html文件点击弹出新窗口怎么操作

<li class="active"><a target="_blank" href="new.php">button</a>

Ⅹ 怎么用html编写点击一个按钮就跳出如下图

先把这个弹窗样式在页面写好隐藏掉，点击按钮的时候把隐藏的样式去掉显示出来就ok

阅读全文

html点击弹出

与html点击弹出相关的阅读推荐