PHP中的Echo Javascript函数显示模式无法正确显示

Question

我在这里有一个代码，旨在在未填充文本框时显示 Javascript 模式（单击发送按钮时，它将检查未填充的文本框和复选框并显示模式，如果一切正常，它将发送一个电子邮件...我首先在文本框上工作）。但是我在正确显示模态时遇到了一些问题。好像当我使用 display: block 时，它将与表单中的其他对象一起显示。但是当我将其设置为显示时：无，即使单击发送按钮后也不会显示任何内容。

这是 modal 的 CSS：

 #overlay {
     display: block;
     position: absolute;
     left: 0px;
     top: 0px;
     width:100%;
     height:100%;
     text-align:center;
     z-index: 800;
    }
 #overlay div {
     width:800px;
     margin: 100px auto;
     background-color: none;
     border:none;
     padding:15px;
     text-align:center;
    }
 body {
     height:100%;
 width:100%;
     margin:0;
     padding:0;
 overflow:auto;
}

HTML：

<div id="overlay">
<div>
      <img src="images/NoUsername.png" alt="module" style="width:469px; height:345px;">
      <p>[<a href='#' onclick='overlay()'>close</a>]</p>
 </div>

我从http://raventools.com/blog/create-a-modal-dialog-using-css-and-javascript/得到这些代码

这里是检查文本框的 PHP 代码：

if ($username == "") {

    echo
    "<script type=\"text/javascript\"> 
    function overlay() {
        el = document.getElementById(\"overlay\");
        el.style.visibility = (el.style.visibility == \"visible\") ? \"hidden\" : \"visible\";
    }</script>";
} 

我在这里尝试使用双引号和单引号，但没有任何反应。我认为问题出在我的 CSS 中。请随时编辑我的代码。提前感谢您的帮助！

Answer 1

正如我所评论的，在直接学习 PHP 和 JavaScript 等编程之前，您应该多学习一点 CSS 和 HTML。在您真正从中学到有意义的东西之前，您的问题可能会被标记为低质量。

我认为visibility 属性不适合您的需求，因为它会在 DOM 中为元素分配空间，即使它是隐藏的。我还认为您应该选择通过 PHP（服务器端）或通过 JavaScript（客户端）显示模式，因为您现在正在做的事情变得非常混乱，对于新手来说更是如此。

我会将你的 CSS 修改为：

 #overlay {
     display: none; /* hidden if not overwritten by style="" attribute or javascript */
     position: fixed; /* fixed makes more sense here as it doesn't depend on the element's parents, search for it */
 ...

如果您选择通过 php 显示或隐藏模态框，则类似于

<div id="overlay" <?php if ($username == "") echo 'style="display: block;"' ?>>
<div>
      <img src="images/NoUsername.png" alt="module" style="width:469px; height:345px;">
...

或者，我认为最好的方法是完全使用 JavaScript（客户端），而不依赖于 php：

<script type="text/javascript">
  function show_modal() {
    el = document.getElementById("overlay");
    el.style.display="block";
  }
  function hide_modal() { // You'll want to use this for the close button
    el = document.getElementById("overlay");
    el.style.display="none";
  }
  function verify_elements() {
    el = document.getElementById("username");
    if (el.value == '') {
      show_modal(); // if the username is '', show'em the modal
      return false; // returning false makes sure the form isn't submited
    }
  }
</script>
<form action="" method="post" onsubmit="verify_elements()">
   <input name="username" id="username" value="" />
...

我希望它能帮助你走上正确的道路。但是，如果您真的想学习而不是永远复制和粘贴，那么您真的应该逐步进行：D

最好的问候！