如何在js中实现点击按钮弹出提示框

JavaScript010

如何在js中实现点击按钮弹出提示框,第1张

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

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

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

function fun() {

alert('click success!')

}

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

弹出提示框一般有3种

1)alert (普通提示框)

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

3)confirm (可选择的提示框)

下面举个例子:

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</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('再来一遍吧')

        }

    }

</script>

</body>

</html>

用JS做一个弹出框。显示内容为选择性别就是日历JS控件一样,当鼠标在文本框中一点。那么就弹出一个小框框。选择性别:男或女按了男或女之后。将内容回填到鼠标点中的那个文本框中。------解决方案--------------------用模式窗口的例子:第一个页面:<html><body>单击选择性别:<input type = "text " name = "userSex " readOnly onclick= "loadSmallWindow(this) " code= " "></body><script language= "javascript ">function loadSmallWindow(obj){var returnValue = showModalDialog( "second.html ",window, "dialogWidth:150pxdialogHeight:90pxstatus:no ")document.all( "userSex ").value = returnValue}</script></html>窗口页面second.html:<html><body><select name = "sel_sex "><option value = "男 ">男 </option><option value = "女 ">女 </option></select><input type= "submit " value = "确定 " onclick= "aa() "></body><script language= "javascript ">window.returnValue = " "function aa(){window.returnValue = document.all( "sel_sex ").valuewindow.close()}</script></html>------解决方案--------------------用层做的例子:<html><body><div id= "div " style= "width:150pxheight=90pxdisplay:nonebackground-color:#ffffeeboder-collapse:collapseborder-color:#000000border-style:solidborder-width:1pxposition:absolutez-index:100 "><select name = "selSex "><option value = "男 ">男 </option><option value = "女 ">女 </option></select><input type= "button " name = "btnOk " value = "确定 "></div>单击选择性别: