всплывающее окно при щелчке по ссылке, немного похожее на почтовый ящик stackoverflow

Question

Я хочу создать страницу модели, которая работает так же, как всплывающее окно stackoverflow.Как и на изображении, приведенном ниже, когда мы нажимаем на иконку «Входящие», значок выглядит как маленькое поле, внутри которого маленький загрузчик показывает сообщения / комментарии.право?>> После его расширения зависит от текста / таблиц / сообщений.

Answer 1

Если я понимаю ваш пост, вы можете попробовать что-то вроде этого:

$(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 и потребностей.

TIP :

, если ваш адрес назначения (который должен быть загружен в целевой элемент) имеет другой url или protocol, вы можете получить некоторые ошибки безопасности из-за проблем Cross Origin.адрес, который я выбрал (https://www.api.github.com), имеет разрешение Allow-Access-* на стороне сервера, и поэтому я могу его использовать.если ваш адрес Dest для загрузки существует по текущему URL-адресу, или у них обоих есть протокол http (ваш сайт и целевой сайт оба), или сайт taget позволяет вам получить к нему доступ (с указанным разрешением), все будет работать правильно.

Надежда помогает вам:)

Answer 2

Я могу дать вам некоторые рекомендации.

Вы должны изучить Bootstrap, чтобы создать красивый HTML.https://www.w3schools.com/Bootstrap/bootstrap_dropdowns.asp

https://bootsnipp.com/snippets/deyGZ

Чтобы оживить ваш HTML, используйте 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);
    });

});

Замените URL своей страницейдля доступа.Перемещение стека находится в другом домене, который будет заблокирован из-за политики CORS.

"Доступ к XMLHttpRequest в 'https://stackoverflow.com/' из источника' null 'был заблокирован политикой CORS: Нет' Access-ControlЗаголовок -Allow-Origin 'присутствует в запрашиваемом ресурсе. "

Подробнее: Почему в моем JavaScript-файле заголовок" Нет Access-Control-Allow-Origin "отсутствует в запрашиваемом ресурсе"ошибка, когда почтальон не?