单击链接时弹出，有点像CSS中的stackoverflow收件箱 [英] popup when click link little like stackoverflow inbox in css

问题描述

我想创建一个模型页面，其工作原理与stackoverflow收件箱弹出窗口相同.就像下面的图片一样，当我们点击收件箱图标时，它看起来像一个小盒子，在里面的小加载程序会显示消息/评论.正确的? >>展开后，取决于文本/表格/消息.

如何添加ajax jQuery来加载div中

"pageaload"的name和id的任何页面，例如，加载的URL为google.com

投机要求请参阅页面，以查看实时错误信息，因为我的英语不好，可能无法解释我的问题，并导致我对此表示怀疑和声誉不佳.

解决方案

如果我了解您的帖子，则可以尝试以下操作:

 $(function(){
  var prv=$([]);
  $(".top-bar>.m-link").click(function(){
     var dst=$(this).children();
     if(dst.html("<div style='width: 50px; height: 10px'>Loading...</div>").toggle().click(function(ev){ev.stopPropagation();}).is(":visible")){
       dst.load("https://api.github.com");
      }
      if(prv[0]!=dst[0]) prv.hide();
      prv=dst;
  });
}); 

 body{
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: #f7f7f7;
  box-sizing: border-box;
}
.top-bar{
  position: fixed;
  top:0;
  width:100%;
  height: 22px;
  background-color: #444;
  box-sizing: border-box;
}
.top-bar>.m-link{
  display: inline-block;
  position: relative;
  float:right;
  width:20px;
  height: 20px;
  top: 1px;
  background-color: #fff;
  box-sizing: border-box;
  background-size: 100%;
  margin-left:1px;
  cursor: pointer;
}
#pageaload{
  position: absolute;
  top: 100%;
  right: 0;
  height: 100px;
  width: 420px;
  background-color: #fff;
  border: solid 1px #999;
  box-sizing: border-box;
  display: none;
  border-top-style: none;
  overflow: auto;
  padding: 4px;
  font-size: 9.5pt;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='top-bar'>
  <div class='m-link' style='background-image: url(https://png.icons8.com/ios/50/000000/plus-2-math.png)'>
    <div id='pageaload'></div>
  </div>
  <div class='m-link' style='background-image: url(https://png.icons8.com/ios/50/000000/new-message.png)'>
    <div id='pageaload' style='background-color: #a7a7a7'></div>
  </div>
</div> 

现在，您可以添加loader png或您想要的内容，而不是我的loading...文本.这是一个项目本身，但我尝试在一个完整而简单的示例中实施它.一切取决于您自己的CSS和需求.

提示:

如果您的目标地址(应加载到目标元素中)具有另一个url或protocol，则可能会由于Cross Origin问题而出现一些安全错误.我选择的地址(https://www.api.github.com)在服务器端具有Allow-Access-*权限，因此，我可以使用它.如果您要加载的目标地址存在于当前URL地址上，或者它们都具有http协议(您的站点和目标站点都使用)，或者Taget站点允许您访问它(经提及的许可)，则所有内容都可以正常工作

希望可以帮助您:)

I want create a model page which work same like stackoverflow inbox popup. Like in image given below , when we hit the inbox icon looks small box where inside it small loader shows for messages/comments. right? >> After it expand depend on text/tables/messages.

How I add ajax jquery to load any page inside div where the name and id of div="pageaload" and for example the url for load is google.com

speculation request please the page for live mistake see, because my english is bad and might I not able to explain my question and causes it I get thumbs down and bad reputation my profile.

解决方案

If i understand your post, you can try something like this:

$(function(){
  var prv=$([]);
  $(".top-bar>.m-link").click(function(){
     var dst=$(this).children();
     if(dst.html("<div style='width: 50px; height: 10px'>Loading...</div>").toggle().click(function(ev){ev.stopPropagation();}).is(":visible")){
       dst.load("https://api.github.com");
      }
      if(prv[0]!=dst[0]) prv.hide();
      prv=dst;
  });
});

body{
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: #f7f7f7;
  box-sizing: border-box;
}
.top-bar{
  position: fixed;
  top:0;
  width:100%;
  height: 22px;
  background-color: #444;
  box-sizing: border-box;
}
.top-bar>.m-link{
  display: inline-block;
  position: relative;
  float:right;
  width:20px;
  height: 20px;
  top: 1px;
  background-color: #fff;
  box-sizing: border-box;
  background-size: 100%;
  margin-left:1px;
  cursor: pointer;
}
#pageaload{
  position: absolute;
  top: 100%;
  right: 0;
  height: 100px;
  width: 420px;
  background-color: #fff;
  border: solid 1px #999;
  box-sizing: border-box;
  display: none;
  border-top-style: none;
  overflow: auto;
  padding: 4px;
  font-size: 9.5pt;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='top-bar'>
  <div class='m-link' style='background-image: url(https://png.icons8.com/ios/50/000000/plus-2-math.png)'>
    <div id='pageaload'></div>
  </div>
  <div class='m-link' style='background-image: url(https://png.icons8.com/ios/50/000000/new-message.png)'>
    <div id='pageaload' style='background-color: #a7a7a7'></div>
  </div>
</div>

Now, you can add a loader png or what you want instead of my loading... text. this is a project itself but i tried implement it in a full and simple example. all things depends on your own css and needs.

TIP:

if your destination address (which shoud be loaded in target element) has another url or protocol, you may get some security errors because Cross Origin problems. the address that i selected (https://www.api.github.com), has Allow-Access-* permission in server side and because this, i can use it. if your dest address for loading exists on current url address, or both of them have http protocol (your site and target site both), or the taget site allow you to access it (by mentioned permission), all thing will work correctly.

Hope helps you :)

这篇关于单击链接时弹出，有点像CSS中的stackoverflow收件箱的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！