Fatal编程技术网
  • javascript/
  • Javascript 如何使代码只适用于一个弹出框的三个弹出框？

Javascript 如何使代码只适用于一个弹出框的三个弹出框？

javascript jquery html css

Javascript 如何使代码只适用于一个弹出框的三个弹出框？,javascript,jquery,html,css,popup,Javascript,Jquery,Html,Css,Popup,下面的代码显示了当用户单击用户名时屏幕底部的弹出框（用户列表显示在屏幕的右上方） Facebook风格的弹出式设计 @仅介质屏幕和（最大宽度：540像素） { .聊天侧边栏 { 显示：无！重要； } .聊天弹出窗口 { 显示：无！重要； } } 身体 { 背景色：#e9eaed； } .聊天侧边栏 { 宽度：200px； 位置：固定； 身高：100%； 右：0px； 顶部：0px； 填充顶部：10px； 垫底：10px； 边框：1px实心rgba（29,49,91,3）； } .侧边栏名称 {

下面的代码显示了当用户单击用户名时屏幕底部的弹出框（用户列表显示在屏幕的右上方）


Facebook风格的弹出式设计
@仅介质屏幕和（最大宽度：540像素）
{
.聊天侧边栏
{
显示：无！重要；
}
.聊天弹出窗口
{
显示：无！重要；
}
}
身体
{
背景色：#e9eaed；
}
.聊天侧边栏
{
宽度：200px；
位置：固定；
身高：100%；
右：0px；
顶部：0px；
填充顶部：10px；
垫底：10px；
边框：1px实心rgba（29,49,91,3）；
}
.侧边栏名称
{
左侧填充：10px；
右边填充：10px；
利润底部：4倍；
字体大小：12px；
}
.侧栏名称范围
{
左侧填充：5px；
}
.侧边栏名称a
{
显示：块；
身高：100%；
文字装饰：无；
颜色：继承；
}
.侧边栏名称：悬停
{
背景色：#e1e2e5；
}
.侧栏名称img
{
宽度：32px；
高度：32px；
垂直对齐：中间对齐；
}
.弹出框
{
显示：无；
位置：固定；
底部：0px；
右：220px；
高度：285px；
背景色：rgb（237239244）；
宽度：300px；
边框：1px实心rgba（29,49,91,3）；
}
.弹出框.弹出头
{
背景色：#6d84b4；
填充物：5px；
颜色：白色；
字体大小：粗体；
字体大小：14px；
明确：两者皆有；
}
.弹出框.弹出标题.左弹出标题
{
浮动：左；
}
.弹出框.弹出标题.右弹出标题
{
浮动：对；
不透明度：0.5；
}
.弹出框.弹出标题.弹出标题右侧a
{
文字装饰：无；
颜色：继承；
}
.弹出框.弹出消息
{
身高：100%；
溢出y：滚动；
}
#碳纤维{
最大宽度：300px；
背景：#f8f8；
}
.碳文本{
显示：块；
宽度：130px；
}
.由{
浮动：对；
}
.复写文本{
填充：8px0；
}
#碳纤维{
填充：15px；
边框：1px实心#ccc；
}
.复写文本{
字体大小：12px；
颜色：#333333；
文字装饰：无；
}
.碳动力{
字体大小：75%；
文字装饰：无；
}
#碳纤维{
位置：固定；
顶部：5px；
左：5px；
}
//此函数可以删除数组元素。
Array.remove=函数（数组、从、到）{
var rest=array.slice（（to | | from）+1 | | array.length）；
array.length=from<0？array.length+from:from；
返回数组.push.apply（数组，rest）；
};
//此变量表示根据视口宽度可以显示的弹出窗口总数
var total_弹出窗口=0；
//弹出窗口ID数组
var弹出窗口=[]；
//这用于关闭弹出窗口
功能关闭\u弹出窗口（id）
{
对于（变量iii=0；iii
现在我的问题是，我想在右下角显示一个名称，并且只显示该名称的一个弹出框。如果用户单击除弹出框以外的任何位置，则弹出框应关闭

我应该如何做到这一点

N.B.：我没有创建
jsfiddle
，因为我不知道如何创建它，但如果您 
<!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>

$(':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(); 
            }
        });