javascript里添加按钮button,然后就可以弹出一个对话框输入数据

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript里添加按钮button,然后就可以弹出一个对话框输入数据相关的知识,希望对你有一定的参考价值。

如题,如何做到在javascript里面添加一个按钮,按了之后就弹出对话框,能输入数据。

你自己找一个jQuery的包导进去  不明白再说

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <script src="bin/jquery-1.8.3.js"></script>


<title>无标题文档</title>

</head>


<body>

</body>

</html>

<!DOCTYPE html> 

<head>

<meta charset="utf-8">

<title></title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 

</head>

<body>

<div id='button' style='margin:40px auto 0 auto;height:30px;width:180px;background:#09C;color:#FFF;font-size:18px;text-align:center;line-height:30px;border-radius: 6px;'>注册</div>

<script>

$(document).ready(function()

var time=0;

    $("#button").click(function()

        showWindow();

        center("register");

        $("#close").click(function()

            removeWindow();

            );

    );



    function showWindow()

        var htm="<div id='register' style='position:fixed; height:200px; width:400px; background:#CCC;'><em id='close' style='font-size:30px; float:right; margin-right:20px;'>×</em><h3 style='color:#FFF; text-align:center;'>注册框实例</h3><p style='text-align:center;'><input type='text' id='username' placeholder='用户名'  /></p><p style='text-align:center;'><input type='password' id='userpass' placeholder='密码' /><em id='strength'></em></p><p style='margin:40px auto 0 auto;height:30px;width:180px;background:#09C;color:#FFF;font-size:18px;text-align:center;line-height:30px;border-radius: 6px;'>注册</p></div>";

       

if(time==0)

   $("body").append(htm);

time=1;

        return false;

       


    function removeWindow()

        $("#register").fadeOut(function()

            $("#register").remove();

            );

        return false;

       


    function center(id)

        var h=$(window).height();

        var w=$(window).width();

        var fh=$("#"+id).height();

        var fw=$("#"+id).width();

        $("#"+id).css(

            "top":(h-fh)/2,

            "left":(w-fw)/2

            );

   

    $(window).resize(function()

    center("register");

    );


);



</script>

</body>

</html>

参考技术A <!DOCTYPE html>
<html>
  <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>
RunJS 演示代码
</title>
<script>
var ck = function()
var x = prompt ("输入数据: ", "");
alert(x);

</script>
  </head>
<body>
    <button onclick="ck();">
click
</button>
  </body>
</html>

本回答被提问者采纳

js 动态添加的按钮 onclick事件怎么写?

参考技术A

    如图,比方说我有一个函数,而我们需要点击按钮触发指定的函数,这就用到了绑定事件的方法。

    如图,假定是点击事件,则在按钮里面添加onclick=函数名即可把函数绑定到按钮上。onclick绑定的是单击事件哦,当然还有很多其他的事件。

    如图,绑定事件之后,当我们点击按钮即可触发绑定的函数,非常神奇哦。

    当然,也可以给按钮设定一个ID,然后我们获取到带有ID的按钮。

    然后在JavaScript中绑定事件也是可以的,这种方法代码比较多,想用哪种看你自己哦。

    需要特别注意一点的是,如果用了第二种方法,当要获取id时,如果script脚本写在head里面,则要加上window.onload哦。如果是写在body后面,则不需要写window.onload。

以上是关于javascript里添加按钮button,然后就可以弹出一个对话框输入数据的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript里面怎么点击按钮让计时停止,再次点击时工作?

js 动态添加的按钮 onclick事件怎么写?

html button 按钮

php怎么给按钮添加事件

JavaScript点击事件/一个按钮触发另一个按钮

H5在js中向指定的元素添加样式