如何使代码仅适用于一个弹出框的三个弹出框？答案

【问题标题】：How to make the code that is workable three pop-up boxes for one pop-up box only?如何使代码仅适用于一个弹出框的三个弹出框？
【发布时间】：2015-02-27 11:25:26
【问题描述】：

我正在关注当用户点击用户名时在屏幕底部显示弹出框的代码（用户列表显示在屏幕的右上角。）

<!doctype html>
<html>
  <head>
    <title>Facebook Style Popup Design</title>
    <style>
    @media only screen and (max-width : 540px) 
    {
      .chat-sidebar
      {
        display: none !important;
      }

      .chat-popup
      {
        display: none !important;
      }
    }

    body
    {
      background-color: #e9eaed;
    }

    .chat-sidebar
    {
      width: 200px;
      position: fixed;
      height: 100%;
      right: 0px;
      top: 0px;
      padding-top: 10px;
      padding-bottom: 10px;
      border: 1px solid rgba(29, 49, 91, .3);
    }

    .sidebar-name 
    {
      padding-left: 10px;
      padding-right: 10px;
      margin-bottom: 4px;
      font-size: 12px;
    }

    .sidebar-name span
    {
      padding-left: 5px;
    }

    .sidebar-name a
    {
      display: block;
      height: 100%;
      text-decoration: none;
      color: inherit;
    }

    .sidebar-name:hover
    {
      background-color:#e1e2e5;
    }

    .sidebar-name img
    {
      width: 32px;
      height: 32px;
      vertical-align:middle;
    }

    .popup-box
    {
      display: none;
      position: fixed;
      bottom: 0px;
      right: 220px;
      height: 285px;
      background-color: rgb(237, 239, 244);
      width: 300px;
      border: 1px solid rgba(29, 49, 91, .3);
    }

    .popup-box .popup-head
    {
      background-color: #6d84b4;
      padding: 5px;
      color: white;
      font-weight: bold;
      font-size: 14px;
      clear: both;
    }

    .popup-box .popup-head .popup-head-left
    {
      float: left;
    }

    .popup-box .popup-head .popup-head-right
    {
      float: right;
      opacity: 0.5;
    }

    .popup-box .popup-head .popup-head-right a
    {
      text-decoration: none;
      color: inherit;
    }

    .popup-box .popup-messages
    {
      height: 100%;
      overflow-y: scroll;
    }

    #carbonads { 
      max-width: 300px; 
      background: #f8f8f8;
    }

    .carbon-text { 
      display: block; 
      width: 130px; 
    }

    .carbon-poweredby { 
      float: right; 
    }
    .carbon-text {
      padding: 8px 0; 
    }

    #carbonads { 
      padding: 15px;
      border: 1px solid #ccc; 
    }

    .carbon-text {
      font-size: 12px;
      color: #333333;
      text-decoration: none;
    }


    .carbon-poweredby {
      font-size: 75%;
      text-decoration: none;
    }

    #carbonads { 
      position: fixed; 
      top: 5px;
      left: 5px;
    }

    </style>

    <script>
    //this function can remove a array element.
    Array.remove = function(array, from, to) {
      var rest = array.slice((to || from) + 1 || array.length);
      array.length = from < 0 ? array.length + from : from;
      return array.push.apply(array, rest);
    };

    //this variable represents the total number of popups can be displayed according to the viewport width
    var total_popups = 0;

    //arrays of popups ids
    var popups = [];

    //this is used to close a popup
    function close_popup(id)
    {
      for(var iii = 0; iii < popups.length; iii++)
      {
        if(id == popups[iii])
        {
          Array.remove(popups, iii);

          document.getElementById(id).style.display = "none";

          calculate_popups();

          return;
        }
      } 
    }

    //displays the popups. Displays based on the maximum number of popups that can be displayed on the current viewport width
    function display_popups()
    {
      var right = 220;

      var iii = 0;
      for(iii; iii < total_popups; iii++)
      {
        if(popups[iii] != undefined)
        {
          var element = document.getElementById(popups[iii]);
          element.style.right = right + "px";
          right = right + 320;
          element.style.display = "block";
        }
      }

      for(var jjj = iii; jjj < popups.length; jjj++)
      {
        var element = document.getElementById(popups[jjj]);
        element.style.display = "none";
      }
    }

    //creates markup for a new popup. Adds the id to popups array.
    function register_popup(id, name)
    {

      for(var iii = 0; iii < popups.length; iii++)
      { 
        //already registered. Bring it to front.
        if(id == popups[iii])
        {
          Array.remove(popups, iii);

          popups.unshift(id);

          calculate_popups();


          return;
        }
      }       

      var element = '<div class="popup-box chat-popup" id="'+ id +'">';
      element = element + '<div class="popup-head">';
      element = element + '<div class="popup-head-left">'+ name +'</div>';
      element = element + '<div class="popup-head-right"><a href="javascript:close_popup(\''+ id +'\');">&#10005;</a></div>';
      element = element + '<div style="clear: both"></div></div><div class="popup-messages"></div></div>';

      document.getElementsByTagName("body")[0].innerHTML = document.getElementsByTagName("body")[0].innerHTML + element;  

      popups.unshift(id);

      calculate_popups();

    }

    //calculate the total number of popups suitable and then populate the toatal_popups variable.
    function calculate_popups()
    {
      var width = window.innerWidth;
      if(width < 540)
      {
        total_popups = 0;
      }
      else
      {
        width = width - 200;
        //320 is width of a single popup box
        total_popups = parseInt(width/320);
      }

      display_popups();

    }

    //recalculate when window is loaded and also when window is resized.
    window.addEventListener("resize", calculate_popups);
    window.addEventListener("load", calculate_popups);
    </script>
  </head>
  <body>
    <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=qnimate" id="_carbonads_js"></script>
    <div class="chat-sidebar">
      <div class="sidebar-name">
        <!-- Pass username and display name to register popup -->
        <a href="javascript:register_popup('narayan-prusty', 'Narayan Prusty');">
          <img width="30" height="30" src="http://qnimate.com/wp-content/uploads/2014/12/Screen-Shot-2014-12-15-at-3.48.21-pm.png" />
          <span>Narayan Prusty</span>
        </a>
      </div>
      <div class="sidebar-name">
        <a href="javascript:register_popup('qnimate', 'QNimate');">
          <img width="30" height="30" src="http://qnimate.com/wp-content/uploads/2014/12/Screen-Shot-2014-12-15-at-3.48.21-pm.png" />
          <span>QNimate</span>
        </a>
      </div>
      <div class="sidebar-name">
        <a href="javascript:register_popup('qscutter', 'QScutter');">
          <img width="30" height="30" src="http://qnimate.com/wp-content/uploads/2014/12/Screen-Shot-2014-12-15-at-3.48.21-pm.png" />
          <span>QScutter</span>
        </a>
      </div>
      <div class="sidebar-name">
        <a href="javascript:register_popup('qidea', 'QIdea');">
          <img width="30" height="30" src="http://qnimate.com/wp-content/uploads/2014/12/Screen-Shot-2014-12-15-at-3.48.21-pm.png" />
          <span>QIdea</span>
        </a>
      </div>
      <div class="sidebar-name">
        <a href="javascript:register_popup('qazy', 'QAzy');">
          <img width="30" height="30" src="http://qnimate.com/wp-content/uploads/2014/12/Screen-Shot-2014-12-15-at-3.48.21-pm.png" />
          <span>QAzy</span>
        </a>
      </div>
      <div class="sidebar-name">
        <a href="javascript:register_popup('qblock', 'QBlock');">
          <img width="30" height="30" src="http://qnimate.com/wp-content/uploads/2014/12/Screen-Shot-2014-12-15-at-3.48.21-pm.png" />
          <span>QBlock</span>
        </a>
      </div>
    </div>    
  </body>
</html>

现在我的问题是我想在右下角显示一个名称，并且该名称只有一个弹出框。如果用户点击弹出框以外的任何地方，弹出框应该关闭。

我应该如何做到这一点？

NB：我没有创建jsfiddle，因为我不知道如何创建它，但如果你只是在你的机器上创建一个 HTML 文件并复制粘贴我的代码，你将能够在您的浏览器中运行代码。

【问题讨论】：

首先创建 jsfiddle 以获得更好的表现
@wiramrathod：我不知道如何创建它，所以我没有创建。但是，如果您只是将我的代码复制粘贴到一个 HTML 文件中，您将能够在浏览器中看到结果。
转到这个网站 (jsfiddle.net) 就像复制粘贴一样简单
不需要 jsfiddle。你也可以在这里做同样的事情
对您的问题感兴趣，但不确定您想要实现什么，在这里为您创建了一个 jsfiddle > jsfiddle.net/pggbuwuk 。介意解释更多吗？

标签： javascript jquery html css popup

【解决方案1】：

将以下事件与弹出窗口绑定。

$(':selector').bind({
            mouseover : function(){
                mouseIn = 1;
            },
            mouseout : function(){
                mouseIn = 0;
            },
            click : function(){
                mouseIn = 1;
            }
        });

        $(document).click(function(){
            if($(":selector").is(":focus")){
                mouseIn == 1;           
            };

            if(mouseIn == 0){
                $(':selector').slideUp(); 
            }
        });

【讨论】：

这将帮助您关闭用户单击除弹出窗口之外的任何其他位置的弹出窗口。当 mouseIn==0 时，调用 closepopup 函数