PHP中用于显示模态的Echo Javascript函数显示不正确

Echo Javascript function in PHP to display modal not displaying properly

本文关键字：显示 Javascript 函数 不正确 Echo 模态 用于 PHP      更新时间：2023-09-26

我这里有一个代码，用于在文本框未填充时显示Javascript模式（单击发送按钮时，它将检查未填充的文本框和复选框and show THE modal，如果一切正常，它将发送一封电子邮件…我先处理文本框）。但我在正确显示模态时遇到了一些问题。当我使用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中。请随意编辑我的代码。提前感谢你们的帮助！

正如我所评论的，在直接学习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

谨致问候！

我认为您错过了调用添加到页面的函数：

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;
}
相关文章：