Question

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

<!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文件并复制粘贴我的代码，您将能够在浏览器中运行代码。

Answer 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(); 
            }
        });

如何只为一个弹出框制作可用的代码三个弹出框？

1 个答案: