Question

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

这是模态的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

最诚挚的问候！

Answer 2

我认为您错过了调用添加到页面中的功能：

if ($username == "") {

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

另外，我认为默认情况下应隐藏叠加层：

#overlay {
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    width:100%;
    height:100%;
    text-align:center;
    z-index: 800;
    visiblity: hidden;
}

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

2 个答案: