js點擊彈窗彈出表單框代碼,js中彈框

本文目錄一覽：

1、如何用JS實現10秒以後自動彈出表單窗口。
2、點擊按鈕彈出對話框代碼
3、怎麼用js彈出提示框

如何用JS實現10秒以後自動彈出表單窗口。

表單的位置大小需要你用CSS設計。以下代碼只是實現了你要的彈出功能。

!DOCTYPE html

html

head

titleHTML模板/title

meta charset=”UTF-8″/

style type=”text/css”

form{

position:absolute;

left:100px;

top:50px;

width:400px;

height:300px;

border:1px solid #aaaaaa

}

/style

script

var t;

function closeForm(){

var form=document.getElementById(“form”);

form.style.display=”none”;

}

function showForm(){

var form=document.getElementById(“form”);

form.style.display=”block”;

window.clearTimeout(t);

}

function timer(){

t=window.setTimeout(showForm,10000);

}

/script

/head

body onload=”timer()”

form id=”form” style=”display:none;”

input type=”text”/

input type=”button” value=”關閉” onclick=”closeForm()”/

/form

/body

/html

點擊按鈕彈出對話框代碼

實現的方法和詳細的操作步驟如下：

1、第一步，打開html編輯器，創建一個新的html文件，例如：index.html，然後輸入代碼，見下圖。

2、第二步，完成上述步驟後，在index.html的body標記中，輸入js代碼，見下圖。

3、第三步，完成上述步驟後，瀏覽器運行index.html頁面。這時，單擊按鈕將彈出一個提示框，見下圖。這樣，以上的問題就解決了。

怎麼用js彈出提示框

彈出提示框一般有3種

1)alert (普通提示框)

2)prompt (可輸入的提示框)

3)confirm (可選擇的提示框)

下面舉個例子:

!doctype html

html lang=”en”

head

meta charset=”UTF-8″

titleDocument/title

/head

body

button onclick=”mal()”第一種:alert/button

button onclick=”mpro()”第二種:prompt/button

button onclick=”mcon()”第三種:confirm/button

script

function mal(){

alert(‘這是一個普通的提示框’);

}

function mpro(){

var val = prompt(‘這是一個可輸入的提示框’,’這個參數為輸入框默認值,可以不填哦’);

//prompt會把輸入框的值返回給你

}

function mcon(){

var boo = confirm(‘這是一個可選擇的提示框,3種提示方式,學會了嗎?’)

//confirm 會返回你選擇的選項,然後可以依據選擇執行邏輯

if(boo){

alert(‘學會了,真聰明’);

}else{

alert(‘再來一遍吧’)

}