I want my HTML pop up to appear from a JS if statement-CodePudding

I can't seem to be making this work, it's a JS if statement to which I want to call my CSS classes. Basically if (user clicks on button ) --> pop up appears. I am calling my classes through PHP because it makes things easier for the rest of my code. I know I am missing something stupid because this should pretty simple : if user clicks --> pop up appears.

Here is the JS if statement:

<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>

Here is the 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;
    }

CodePudding user response：

You have mixed the javascript and html together. In your browser, if you look at the page source you will see something like this:

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

What's inside the script tag is not valid javascript so there must be errors in your browser's console.

I think what you want is to write the html to the page and then the javascript separately.

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

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

I'm not sure what the increment button is supposed to do but maybe what you want is to show overlay div like this:

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

CodePudding user response：

Front end and backend script are totally different, you can invoke front end script with back end but you cannot do it either way.

I wonder how your script is working, it should throw error on console, because html elements are not valid identifiers inside JS.

What you want is just a pop up on click right?

Do something like this.

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

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

Since I don't know how PHP is involved in you functionality, I couldn't answer properly. But if you have any doubt you can comment down and ask me.

But according to my answer your php script may look like this.

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

Now as myfun() having onclick even listener on button, it will pop box on click.