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

【问题标题】：I want my HTML pop up to appear from a JS if statement我希望我的 HTML 弹出窗口出现在 JS if 语句中
【发布时间】：2021-12-19 18:58:45
【问题描述】：

我似乎无法完成这项工作，这是我想调用我的 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;
    }

【问题讨论】：

要通过 JavaScript 插入 HTML，您可以使用 $('.increment').html('<div>…</div>')。绝对不要像这样混合 HTML 和 JS。

标签： javascript php html css

【解决方案1】：

前端和后端脚本完全不同，你可以用后端调用前端脚本，但你不能这样做。

我想知道你的脚本是如何工作的，它应该在控制台上抛出错误，因为 html 元素在 JS 中不是有效的标识符。

你想要的只是点击右键弹出？

做这样的事情。

<div class="box" id="box" style="display:none">
...
</div>

<script type="text/javascript">
                      function myfun(){
                      $(".increment").click(function(){
                         popUp();
                      })  
                      }        
                      function(){
                         $("#box").css("display"," ");
                      }
                      </script>

由于我不知道 PHP 如何参与您的功能，因此无法正确回答。但是如果你有任何疑问，你可以评论并问我。

但根据我的回答，您的 php 脚本可能看起来像这样。

<?php 
 if(//some condition for pop up to appear){
  echo "<script>myfun();</script>";
}
?>

现在 myfun() 在按钮上有 onclick 甚至监听器，它会在点击时弹出框。

【讨论】：

【解决方案2】：

您已将 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();

【讨论】：