js点击弹出悬浮表单

JavaScript014

js点击弹出悬浮表单,第1张

表单的位置大小需要你用CSS设计。以下代码只是实现了你要的弹出功能。

<!DOCTYPE html>

HTML模板

<br /> form{<br /> position:absolute<br /> left:100px<br /> top:50px<br /> width:400px<br /> height:300px<br /> border:1px solid #aaaaaa<br /> }<br />

<br /> var t<br /> function closeForm(){<br /> var form=document.getElementById("form")<br /> form.style.display="none"<br /> }<br /> function showForm(){<br /> var form=document.getElementById("form")<br /> form.style.display="block"<br /> window.clearTimeout(t)<br /> }<br /> function timer(){<br /> t=window.setTimeout(showForm,10000)<br /> }<br />

表单的位置大小需要你用CSS设计。以下代码只是实现了你要的弹出功能。

<!DOCTYPE html>

<html>

 <head>

  <title>HTML模板</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>