當前位置：首頁 » 編程語言 » 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點擊彈出相關的閱讀推薦