CODEWITHSUNDEEP
javascripthtmlcss
Vishal A
Vishal A

Reputation: 43

HTML Popup not displaying

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
    <meta name="dcterms.created" content="Sun, 12 Feb 2017 03:36:45 GMT">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <title></title>
    
    <!--[if IE]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    	<style>
    	
          form {
            max-width: 500px;
            margin: 10px auto;
            padding: 10px 10px;
            background: #fff;
            color: #071b51;
            border: 1px #071b51;
            border-radius: 8px;
          }
    	   
         .loginpopup:hover {
           background-color: #071b51;
           color: #fff;
        	  }
        
         /*hover on span*/
        .popuptext:hover {
           pointer-events: auto;
          }
          
          
        .show {
            visibility: visible;
        }
        
        .loginpopup {
              position: relative;
            display: inline-block;
            cursor:pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        	padding: 19px 39px 18px 39px;
          background-color: #071b51;
          font-size: 18px;
          text-align: center;
          font-style: normal;
          border-radius: 10px;
          border: 1px solid #072583;
          border-width: 1px 1px 3px;
          border-color: #fff;
          box-shadow: 0 -1px 0 rgba(255,255,255,0.1) inset;
          margin-bottom: 10px;
          color:#fff;
           
         }
        
         .popuptext {
            visibility:hidden;
         	width: 400px;
            background-color: #fff;
            color: #071b51;
            text-align: center;
            border-radius: 6px;
            padding: 10px 10px;
            position: absolute;
            z-index: 1;
            bottom: -1000%;
            left: 0%;
            margin-left: -500px;
          }
        	</style>
	
</head>
  <body>
  
  <div id="loginbutton" class="loginpopup" onclick="openPopup(); "style="font-family: sans-serif; width: 150px; left: 310px; height: 60px; top: 0px;">Login</div>

  	   <span id="myPopup" class="popuptext" style="border: solid 10px #071b51;">
	  
	    	 <form>
	  		 	   <h1>Login</h1>
        
        		   				 <fieldset>
          
                                  <label for="mail">Email:</label>
                                  <input type="email" id="mail" name="user_email" style="border:solid 1px #071b51; border-radius: 5px;">
                                  
                                  <label for="password">Password:</label>
                                  <input type="password" id="password" name="user_password" style="border:solid 1px #071b51; border-radius: 5px;">
                                </fieldset>
                <button type="submit">Login</button>

			</form>
	   </span>




 <!--JS for all actions on main page-->
  <script>	
  //open myPopup	 
	function openPopup() {
			 var popup1 = document.getElementById("myPopup");
    		 popup1.classList.toggle("show");
	} 
	
	</script>	


  </body>
</html>

Can someone help me figure out the problem with this? Initially, "myPopup"'s visibility attribute is set to "hidden". Later, when "loginbutton" is clicked (onclick() ), the function "openPopup()" is called which sets "myPopup"'s visibility attribute is set to "visible" via the class "show". However, "myPopup" remains hidden. Is there something I've overlooked? Thanks

Upvotes: 2

Views: 2381

Answers (4)

Kaashan
Kaashan

Reputation: 382

A quick inspection in Chrome Dev Tools inspector shows this after you click on the 'Login':

enter image description here

The class is correctly added, but the "visibility" property in 'show' class gets overridden by "visibility" property in 'popuptext' class. This is because 'popuptext' is defined AFTER 'show' class inside your style tag and both the classes have same weightage (or Specificity in CSS terms).

Correction 1 : Place the 'popuptext' class BEFORE 'show' class. This will override the "visibility" property as you would have wanted.

The pop-up still won't be visible on UI. This is because of huge negative margin set for margin-left property in "popuptext" class. Also, the bottom property has a very high value. This will place your popup far below at the bottom of page.

Correction 2 : Adjust your margin-left and bottom property as well.

Upvotes: 0

sono123
sono123

Reputation: 51

The problem is your positioning. Your code is actually working as expected, but the popup is being pushed off of the page. Try this css:

 .popuptext {
    visibility:hidden;
    width: 400px;
    background-color: #fff;
    color: #071b51;
    text-align: center;
    border-radius: 6px;
    padding: 10px 10px;
    position: absolute;
    z-index: 1;
    /*bottom: -1000%;*/
    /*margin-left: -500px;*/
    left: 0%;
  }

Upvotes: 0

tao
tao

Reputation: 90068

Your javascript correctly adds show class to #myPopup. However, that doesn't change anything in how it is displayed because:

  • .popuptext is defined later in CSS than .show and, having the same specificity (1 class) effectively overrides it.
  • .popuptext has a bottom:-1000% (that's a lot) and also a margin-left of -500px, which makes it render outside the screen.

I removed the offending rules and also placed .show below .popuptext in CSS.

function openPopup() {
  var popup1 = document.getElementById("myPopup");
  popup1.classList.toggle("show");
} 
form {
  max-width: 500px;
  margin: 10px auto;
  padding: 10px 10px;
  background: #fff;
  color: #071b51;
  border: 1px #071b51;
  border-radius: 8px;
}

.loginpopup:hover {
  background-color: #071b51;
  color: #fff;
}

/*hover on span*/
.popuptext:hover {
  pointer-events: auto;
}

.loginpopup {
  position: relative;
  display: inline-block;
  cursor:pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 19px 39px 18px 39px;
  background-color: #071b51;
  font-size: 18px;
  text-align: center;
  font-style: normal;
  border-radius: 10px;
  border: 1px solid #072583;
  border-width: 1px 1px 3px;
  border-color: #fff;
  box-shadow: 0 -1px 0 rgba(255,255,255,0.1) inset;
  margin-bottom: 10px;
  color:#fff;

}

.popuptext {
  visibility:hidden;
  width: 400px;
  background-color: #fff;
  color: #071b51;
  text-align: center;
  border-radius: 6px;
  padding: 10px 10px;
  position: absolute;
  z-index: 1;
  left: 0%;
}
.show {
  visibility: visible;
}
<div id="loginbutton" class="loginpopup" onclick="openPopup(); "style="font-family: sans-serif; width: 150px; left: 310px; height: 60px; top: 0px;">Login</div>

<span id="myPopup" class="popuptext" style="border: solid 10px #071b51;">

  <form>
    <h1>Login</h1>

    <fieldset>

      <label for="mail">Email:</label>
      <input type="email" id="mail" name="user_email" style="border:solid 1px #071b51; border-radius: 5px;">

      <label for="password">Password:</label>
      <input type="password" id="password" name="user_password" style="border:solid 1px #071b51; border-radius: 5px;">
    </fieldset>
    <button type="submit">Login</button>

  </form>
</span>

Upvotes: 4

toastrackengima
toastrackengima

Reputation: 8732

Your element is positioned way off the page.

Remove bottom:1000% and margin-left:-500px from .popuptext and it'll work fine.

Upvotes: 0

Related Questions