Popup When Click Link Little Like Stackoverflow Inbox In Css

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

Solution 1:

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;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass='top-bar'><divclass='m-link'style='background-image: url(https://png.icons8.com/ios/50/000000/plus-2-math.png)'><divid='pageaload'></div></div><divclass='m-link'style='background-image: url(https://png.icons8.com/ios/50/000000/new-message.png)'><divid='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 :)

Solution 2:

I can give you some guidelines.

You have to learn Bootstrap to build beautiful HTML. https://www.w3schools.com/Bootstrap/bootstrap_dropdowns.asp

https://bootsnipp.com/snippets/deyGZ

In order to make life to your HTML, use Jquery

 $(document).ready(function(){
    // This will be your starting point.// for your question// <div id='pageaload'></div>
     $.get("https://stackoverflow.com").done(function(data, status){
        $('#pageaload').html(data);
    });

});

Replace the url with your page to access. The stackoverflow is in different domain which will be blocked due to CORS policy.

"Access to XMLHttpRequest at 'https://stackoverflow.com/' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."

More detail: Why does my JavaScript get a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error when Postman does not?