时间戳

首页 > 解决方案 > 我希望我的 HTML 弹出窗口出现在 JS if 语句中

javascript - 我希望我的 HTML 弹出窗口出现在 JS if 语句中

问题描述

我似乎无法完成这项工作，这是我想调用我的 CSS 类的 JS if 语句。基本上如果（用户单击按钮）-> 弹出窗口出现。我通过 PHP 调用我的类，因为它使我的其余代码更容易。我知道我错过了一些愚蠢的东西，因为这应该很简单：如果用户单击 --> 弹出窗口。

这是 JS if 语句：

<script type="text/javascript">
                      $(function(){
                      $(".increment").click(function(){
                      <?php
                      echo"<div class=\"box\">";
                      echo"<div class=\"button\">";
                       
                      echo"</div>";
                      echo"<div class=\"overlay\">";
                      echo"<div class=\"popup\">";
                      echo"<h3>Looks like you are not logged in!</h3>";
                      echo"<a class=\"close\" </a>";
                      echo"<div class=\"content\">";
                      echo"Please identify yourself before voting.";
                      echo"<div class =\"content2\">";
                                
                      echo"<a href=\"registration.php\">Register</a>";  
                      echo"<a href=\"login.php\" class=\"right\">Login</a>";
                               
                      echo"</div>";
                      echo"</div>";
                      echo"</div>";
                      echo"</div>";
                      echo"</div>";
                      ?>
                      </script>

这是CSS：

.box {
  width: 40%;
  margin: 0 auto;
  background: rgba(255,255,255,0.2);
  padding: 35px;
  border: 2px solid #fff;
  border-radius: 20px/50px;
  background-clip: padding-box;
  text-align: center;
}
.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}

.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 30%;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
  position: absolute;
  top: 10px;
  right: 20px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
    #left {
        text-align: left;
    }

标签： javascriptphphtmlcss

解决方案

您已将 javascript 和 html 混合在一起。在您的浏览器中，如果您查看页面源代码，您会看到如下内容：

<script type="text/javascript">
                  $(function(){
                  $(".increment").click(function(){
                  <div class="box">
                  ...
                  </div>

脚本标签内的内容不是有效的 javascript，因此您的浏览器控制台中一定有错误。

我认为你想要的是将 html 写入页面，然后分别写入 javascript。

<div class="box">
...
</div>

<script type="text/javascript">
      $(".increment").click(function(){
         // Handle the increment function here
      });

我不确定增量按钮应该做什么，但也许你想要的是像这样显示覆盖 div：

         $( '.overlay' ).show();

推荐阅读