[Solved] popup when click link little like stackoverflow inbox in css

by


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 🙂

2

solved popup when click link little like stackoverflow inbox in css