0

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

这是模态的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 中。请随时编辑我的代码。提前感谢您的帮助！

4

2 回答 2

0

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

此致！

于 2013-08-25T10:09:22.647 回答
-1

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

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;
}
于 2013-08-25T09:37:56.993 回答