html5和css怎么实现点击按钮弹出框

html-css05

html5和css怎么实现点击按钮弹出框,第1张

<input id="test">提交</input>//提交按钮

<script type="text/javascript">

$("#test").click(function () {//点击事件

alert("hello,world!")//弹出的内容

})

</script >

回答人的补充 2009-12-24 19:44 <!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/htmlcharset=gb2312" />

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

<style type="text/css">

<!--

#Layer1 {

position:absolute

left:246px

top:84px

width:316px

height:217px

z-index:1

display:none

background-color:red

color:#FFFFFF

}

-->

</style>

<script type="text/javascript">

function show(id){

document.getElementById(id).style.display="block"

}

</script>

</head><body>

<input name="show" type="button" id="show" onclick='show("Layer1")' value="点击显示层" />

<div id="Layer1">我只是一个层</div>

</body>

</html> 在那个层里面写上你需要显示的数据可以在页面加载的时候就显示那这样你点击显示出了层的时候它就显示数据了

<head>

    <title></title>

    <style type="text/css">

    .div1{position:absolutedisplay:none}

    .div2{position:absolutedisplay:none}

    </style>

    <script type="text/javascript">

        function div1Show() {

            var div1 = document.getElementById("div1")

            div1.style.display = ""

        }

        function div2Show() {

            var div1 = document.getElementById("div1")

            var div2 = document.getElementById("div2")

            div1.style.display = "none"

            div2.style.display = ""

        }

    </script>

</head>

<body>

    <div id="div1" class="div1">

    </div>

    <div id="div2" class="div1">

    <input type="button" value="btn2" id="btn2" onclick="div2Show()" />

    </div>

    <input type="button" value="btn1" id="btn1" onclick="div1Show()"/>

</body>

</html>