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>

温馨提示:内容为网友见解,仅供参考
第1个回答  推荐于2017-09-11
<!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>

本回答被提问者采纳
相似回答