Question

基本上是我的代码：

  <html>
  <head>
  <script>
  function promptSignIn(){
   var promptbox = document.getElementById('promptbox');

   var xml = '<ul style="list-style-type:none;margin-left:-25px;">
  <li style="font-family:sans-serif;font-size:15;">You must Sign in to access great things...</li>
  <li><br></li>
  <li style="font-family:sans-serif;">Enter Your Email Address:<br><div style="width:280px;height:45px;-webkit-linear-gradient(#e4e4e4, #e9e9e9);
  background: -o-linear-gradient(##e4e4e4, #e9e9e9);
  background: -moz-linear-gradient(#e4e4e4, #e9e9e9);
  background: linear-gradient(#e4e4e4, #e9e9e9);border:1px solid lightgrey;margin-left:-10px;"><input style="-webkit-linear-gradient(#e4e4e4, #e9e9e9);
  background: -o-linear-gradient(##e4e4e4, #e9e9e9);
  background: -moz-linear-gradient(#e4e4e4, #e9e9e9);
  background: linear-gradient(#e4e4e4, #e9e9e9);border:0px;width:280;height:45px;" type="text" value="" name="username"/> </div>
  <br>

  <li style="font-family:sans-serif;">Enter Your Password:<br><div style="width:280px;height:45px;-webkit-linear-gradient(#e4e4e4, #e9e9e9);
  background: -o-linear-gradient(##e4e4e4, #e9e9e9);
  background: -moz-linear-gradient(#e4e4e4, #e9e9e9);
  background: linear-gradient(#e4e4e4, #e9e9e9);border:1px solid lightgrey;margin-left:-10px;"><input style="-webkit-linear-gradient(#e4e4e4, #e9e9e9);
  background: -o-linear-gradient(##e4e4e4, #e9e9e9);
  background: -moz-linear-gradient(#e4e4e4, #e9e9e9);
  background: linear-gradient(#e4e4e4, #e9e9e9);border:0px;width:280;height:45px;" type="password" value="" name="password"/> </div>
  <br>
  <li><input type="submit" value="Sign in" style="margin-left:-10px;width:280px;height:40px;border:0px;background: -webkit-linear-gradient(#2B65EC, #2B60DE);
  background: -o-linear-gradient(#2B65EC, #2B60DE);
  background: -moz-linear-gradient(#2B65EC, #2B60DE);
  background: linear-gradient(#2B65EC, #2B60DE);color:#fff;"/>
  </ul>
  </form>';


   if(promptbox.style.visibility == "hidden"){
    promptbox.style.visibility = "visible";
    promptbox.innerHTML = xml;
   }else{
    promptbox.style.visibility = "hidden";
    promptbox.innerHTML = "";
   }
  }
  </script>
  <title>Droid - Social Networking Platform</title>
  <meta name="description" content="Welcome to Droid, Login or signup to continue">
  </head>
  <body>
  <style>
  body{
  margin:0px;
  }
    #navbar{
    margin-top:0px;margin-right:0px;margin-left:0px;height:125px;
    background: -webkit-linear-gradient(#e1e1e1, #e6e6e6);
  background: -o-linear-gradient(#e1e1e1, #e6e6e6);
  background: -moz-linear-gradient(#e1e1e1, #e6e6e6);
  background: linear-gradient(#e1e1e1, #e6e6e6);
  border-bottom:2px solid #306EFF
    }

  </style>
  <div id="navbar">
  <a href="index">
        <img src="image;/logo.png" width="200" height="85" style="margin:8px;">
  </a>

  <div id="searchbg" style="margin-top:-75px;margin-left:245px;width:440px;height:45px;background: -webkit-linear-gradient(#e4e4e4, #e9e9e9);
  background: -o-linear-gradient(##e4e4e4, #e9e9e9);
  background: -moz-linear-gradient(#e4e4e4, #e9e9e9);
  background: linear-gradient(#e4e4e4, #e9e9e9);border:1px solid grey;border-radius:4px;">
    <form method="get" action="search.php" autocomplete="off">
  <input type="text" style="margin-left:5px;background: -webkit-linear-gradient(#e4e4e4, #e9e9e9);
  background: -o-linear-gradient(##e4e4e4, #e9e9e9);
  background: -moz-linear-gradient(#e4e4e4, #e9e9e9);
  background: linear-gradient(#e4e4e4, #e9e9e9);width:430px;height:45px;border:0px;" value="Search" name="query">

 <input type="submit" value="Search" style="margin:-45px;margin-left:380px;width:60px;height:45px;border-top-right-radius:4px;border-bottom-right-radius:4px;border:0px;background: -webkit-linear-gradient(#2B65EC, #2B60DE);
  background: -o-linear-gradient(#2B65EC, #2B60DE);
  background: -moz-linear-gradient(#2B65EC, #2B60DE);
  background: linear-gradient(#2B65EC, #2B60DE);color:#fff;">
      </form></div>

  <button style="margin:-45px;margin-left:800px;border-radius:3px;width:60px;height:45px;border:0px;background: -webkit-linear-gradient(#2B65EC, #2B60DE);
  background: -o-linear-gradient(#2B65EC, #2B60DE);
  background: -moz-linear-gradient(#2B65EC, #2B60DE);
  background: linear-gradient(#2B65EC, #2B60DE);color:#fff;" onclick="promptSignIn()">Sign in</button>


  </div>

  <div id="promptbox" style="margin: auto; margin-top: 130px; width:300px; height:400px;background: -webkit-linear-gradient(#e1e1e1, #e6e6e6);
  background: -o-linear-gradient(#e1e1e1, #e6e6e6);
  background: -moz-linear-gradient(#e1e1e1, #e6e6e6);
  background: linear-gradient(#e1e1e1, #e6e6e6);border-radius:2px;border:1px solid grey;">
  <div id="prompttitle" style="width:100%;height:40px;margin:0px;border-bottom:1px solid lightgrey;">
  <h1 id="promptTitle" style="margin:3px;font-family:sans-serif;font-size:15;">Please Sign in</h1>
  <img src="image;/close.png" width="20" height="20" style="margin-top:-25px;margin-left:280px;" onclick="closePrompt()"/>
  </div>
  <div id="promptContent" style="margin-top:45px;margin:auto;width:290px;height:350px;">

 </div>

  </div>

  </body>
  </html>

当用户想要登录时，我希望他们看到内部有登录的提示框，这个1框将用于所有提示，所以我需要它每次更改内部html代码单击不同的按钮。任何建议，我是Javascript的初学者。

Answer 1

Live Demo

将CSS更改为不内联
将XML var上的内容移动到promptContent
将脚本更改为

window.onload = function () {
  document.getElementById('promptbox').style.display = "none";
  document.getElementById('signin').onclick = function () {
    var promptbox = document.getElementById('promptbox');
    promptbox.style.display = promptbox.style.display == "none" ? "block" : "none"
  }
  document.getElementById('closePrompt').onclick = function () {
    document.getElementById('promptbox').style.display = "none";
  }
}

Javascript innerHTML返回错误

1 个答案: