为什么我的弹出窗口在 IE 或 Mozilla Firefox 中不起作用？ [关闭]答案

【问题标题】：Why my pop up window not work in IE or Mozilla Firefox? [closed]为什么我的弹出窗口在 IE 或 Mozilla Firefox 中不起作用？ [关闭]
【发布时间】：2015-10-17 05:58:33
【问题描述】：

我尝试制作弹出式登录窗口，但它在 IE 或 Mozilla Firefox 中不起作用。我用过 JS、html 和 CSS……

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

有JS

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

还有css

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

不知道哪里出了问题……

感谢您的帮助

【问题讨论】：

也许问题不在于您发布的内容，这似乎没问题！
有些东西是内联块、表格单元等，这是一个糟糕的切换。最好使用elm.classList.toggle("hidden") 和一个隐藏类，它还可以让您轻松制作动画和填充内容
为了清楚起见，这不是短语通常含义中的弹出窗口（弹出窗口是一个新的窗口，而不是页面上的内容）。检查控制台是否有错误（按 F12，找到“控制台”选项卡，查找任何问题）。可能是其他地方中断 javascript 执行的问题
用href="#"代替href="javascript:void(0)"。更简单、更清洁、几乎完全相同
你怎么称呼toggle_visibility？ .boxPosition 是一个类，在函数中，您通过 id 获取元素。将 css 更改为 #boxPosition {..}

标签： javascript html css internet-explorer firefox

【解决方案1】：

以下不是错误，而是避免它以防止错误！

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

下面的测试似乎没问题（隐藏“logBox”没问题）！
我使用的是 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>

总之：

也许问题不在于您发布的内容，这看起来不错！

【讨论】：

不完全正确...Do 'if' statements in JavaScript require curly braces?，虽然这是非常糟糕的做法，容易出错，并且会让我工作的任何人都受到打击...
@Basic 哇！我学到了一些东西！谢谢！但应该避免...
不用担心。它适用于 C#、Java、C++ 和大多数其他 C 风格的语言。简而言之，花括号定义了一段代码。 if [和 else] 语句选择要执行的“一个”事物。通常那个“一个”东西是一段代码，但它同样可以是一行。在 JS 中，{} 也定义了一个对象，所以我认为你不能随意使用它（未经测试），但是在（比如）C# 中，你可以在任何代码段周围放置一个{}，它会起作用，尽管{} 被视为变量的范围（与在循环中使用时相同），因此在内部声明的变量将无法在外部访问
你是对的！错误出现在下面的部分我们没有...我在<a href="javascript:void(0)" class="hiddenlink" onclick="toggle_visibility('logBox');">Log In</a> 之外有按钮，当我删除按钮标签<button...> </button> 然后它像梦一样工作！！！！谢谢！
不客气，很高兴为您提供帮助！

【解决方案2】：

您可能必须使用 jQuery 来执行弹出窗口。你有Javascript吗经验？制作模态可能会有所帮助，这是我使用过的唯一方法。

JQuery Modal How-To

【讨论】：

添加一个完整的框架来解决一个微不足道的问题似乎有点矫枉过正。这并不是说使用 jQuery 是一个坏主意，但是如果你在转向框架之前不了解普通的 javascript，那么当出现问题时你会遇到真正的麻烦
确实如此。这就是为什么我问是否有使用 Javascript 的经验！