popup when click link little like stackoverflow inbox in css

Question

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.

Hassan Sadeghi · Accepted Answer · 2018-10-05T07:57:41.017

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 :)

`http://api.github.com` is just a sample of web actions that `Access-Control-Allow-Origin` permission of it has been set up to `*` (*: all) in server side and allows you to access it without any security problem. based on my **TIP** part, if dest url is part of current web site, you can use it without any problem. — Hassan Sadeghi, Oct 05 '18 at 08:26
please update the answer last: what happens when I don't want to redirect url in Jquery and instead i want show `
` as `id="mypage"` . Where hide and show function will work. SPlease reply and help me last. — Pritam Gosai, Oct 06 '18 at 13:47

Linoy · Answer 2 · 2018-10-01T17:11:22.640

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?

Yes, the code is correct but url "https://stackoverflow" cannot be accessed directly thorugh an ajax call due to security reasons. You can replace the url with your page, that will work — Linoy, Oct 01 '18 at 17:08
Check the browser console that will show you the warning message. Hope this helps — Linoy, Oct 01 '18 at 17:13

popup when click link little like stackoverflow inbox in css

2 Answers2

Linked