Как реализовать загрузку на странице контента с другой страницы?

Question

Подскажите пожалуйста. Есть сайт, главная страница. Как реализовать такое:

Кнопка -> Нажатие - > Кнопка исчезает -> Подгрузка содержимого другой страницы в блоке (на другой странице расположен только js виджет) с крестиком "закрыть" Контент не должен всплывать на всю страницу, а должен оставаться внутри блока. Может есть примеры какие, в интернете все что не работают, сработало только через object, но не подошло так как появился скролл и его ничем не убрать кроме как выставить в жесткую высоту и ширину объекта, а так как виджет адаптивный это не подходит.

$("#ajax").click(function(){
    var $loading = $(".loading");
    $.ajax({
        url:"https://avia-avia.ru/uvedomlenie.php",
        dataType:"json",
        beforeSend:function(){
            $loading.removeClass("is-hide");
        },
        success: function(data){
            $loading.addClass("is-hide");
            data.items.forEach(function(item){
                $("#list").append("<li>"+item.title+"</li>");
            });
        }
    });
});

 .is-hide{
 display:none; 
}
.loading{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background:rgba(0,0,0,.5);
}
.loading::before{
  content:"";
  display:block;
  position:fixed;
  left:50%;
  top:50%;
  width:50px;
  height:50px;
  border-radius:5px;
  margin-top:-15px;
  margin-left:-15px;
  background:white;
}
.loading::after{
  content:"";
  display:block;
  position:fixed;
  left:50%;
  top:50%;
  width:32px;
  height:32px;
  border-radius:20px;
  margin-top:-10px;
  margin-left:-10px;
  border:4px solid #60ABB9;
  border-right:4px solid white;
  animation: rotate 1s infinite linear;
}
@keyframes rotate {
  0%    { transform: rotate(0deg); }
  100%  { transform: rotate(360deg); }
}

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.getScript demo</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript" ></script>
 </head>
<body>
<button id="ajax">ajax</button>
<ul id="list"></ul>
<div class="loading is-hide">
  <div class="loading_icon"></div>
</div>
</body>
</html>

БЛОГ НА HUSL

Как реализовать загрузку на странице контента с другой страницы?

Ответы (0 шт):