1

I tried to make pop up window for login and it not work in IE or Mozilla Firefox. I used JS, html and CSS... 

    <a href="javascript:void(0)" class="hiddenlink"    onclick="toggle_visibility('logBox');">Log In</a>

there is JS

    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }

and there is css

.boxPosition{
position: absolute;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.7);
display: none;
width: 100%;
height: 100%;
}

I don't know where is problem...

Thanks for any help

  • maybe the problem don't come from what you posted which seems ok ! – Anonymous0day Oct 16 '15 at 21:22
  • some things are inline-block, table-cell, etc, that's a poor toggle. better to use `elm.classList.toggle("hidden")` and a hidden class, which also lets you easily animate and stuff – dandavis Oct 16 '15 at 21:25
  • Just to be clear, that's not a popup in the usual meaning of the phrase (a popup is a new _window_ not content on a page). Check the console for errors (press F12, find the "Console" tab, look for any problems). Possibly it's a problem elsewhere interrupting javascript execution – Basic Oct 16 '15 at 21:25
  • Instead of `href="javascript:void(0)"` use `href="#"`. Simpler, cleaner and near-identical – Basic Oct 16 '15 at 21:28
  • How do you call `toggle_visibility`? .boxPosition is a class, and in the function your are getting de element by id. Change the css to #boxPosition {..} – aleixfabra Oct 16 '15 at 21:29
  • @aleixfabra boxPosition is class, but logBox is id –  Oct 16 '15 at 22:54

2 Answers2

0

You may have to use jQuery to do the pop-up. Do you have any Javascript experience? Making a modal may help, it's the only way I've ever used it.

JQuery Modal How-To

Xiggy
  • 33
  • 5
  • Adding a whole framework to solve a trivial problem seems like overkill. That's not to say using jQuery is a bad idea, but if you don't understand plain javascript before moving on to frameworks, you'll have real trouble when something goes wrong – Basic Oct 16 '15 at 21:27
  • Well that's true. That's why I asked if there was experience with Javascript! – Xiggy Oct 20 '15 at 02:27
0

Below not errors but avoid it to prevent errors ! 

function toggle_visibility(id) {
  var e = document.getElementById(id);
  if (e.style.display == 'block') {//<-------CORRECT THIS {

    e.style.display = 'none';

  } else { //<-------------------------------CORRECT THIS {}

    e.style.display = 'block';
  }//<---------------------------------------CORRECT THIS }
}

The testing below seems ok (no problem it hide "logBox") !
I use Firefox

function toggle_visibility(id) {
      var e = document.getElementById(id);
      if (e.style.display == 'block') {//<-------CORRECT THIS {

        e.style.display = 'none';
      
      } else { //<-------------------------------CORRECT THIS {}

        e.style.display = 'block';
      }//<---------------------------------------CORRECT THIS }
    }
.boxPosition{
  position        : absolute;
  top             : 0;
  left            : 0;
  background-color: rgba(0,0,0,0.7);
  display         : none;
  width           : 100%;
  height          : 100%;
}
<a href="javascript:void(0)" class="hiddenlink"    onclick="toggle_visibility('logBox');">Log In</a>

<!-- 
     Maybe your issue come from the part below
     we haven't
-->
<div id='logBox' style='display : block;'>
  I am the LogBox<br>
  Name : <input type='text'/><br>
  Pass :<input type='password'/><br>
</div>

So in conclusion :

maybe the problem don't come from what you posted which seems ok !

Anonymous0day
  • 3,012
  • 1
  • 14
  • 16
  • Not strictly true... [Do 'if' statements in JavaScript require curly braces?](http://stackoverflow.com/questions/7117873/do-if-statements-in-javascript-require-curly-braces), although it's very bad practice, error-prone and would get anyone I work with a slap on the wrist... – Basic Oct 16 '15 at 21:38
  • 1
    @Basic WOW ! i learned something ! thanks ! But it should be avoided ... – Anonymous0day Oct 16 '15 at 21:42
  • No worries. It works in C#, Java, C++ and most other C-style languages. In short, the curly braces define a section of code. The if [and else] statements choose between which "one" thing to execute. Normally that "one" thing is a block of code, but it can equally be a single line. In JS, `{}` also defines an object, so I don't think you can use it arbitrarily (untested), but in (say) C# you can place a `{}` around any section of code and it will work, although the `{}` are treated as a scope for variables (same as when used in a loop) so variables declared inside will not be accessible outside – Basic Oct 16 '15 at 23:42
  • You were right! Error comes part below we havent... I have button outside the `Log In` and when i delete button tags ` ` Then it work like dream!!!! Thanks! –  Oct 20 '15 at 11:38
  • You are welcome , glad to help you ! – Anonymous0day Oct 20 '15 at 11:54