Home>

Please tell me. There is a website, a main page. How to implement this:

  1. Button -> Pressing -> The button disappears -> Loading the content of another page in a block (only the js widget is located on the other page) with a "close" cross The content should not float to the entire page, but should remain inside the block. Maybe there are examples of what, on the Internet, everything that does not work, worked only through the object, but did not fit because a scroll appeared and nothing can be removed except to set it to a rigid height and width of the object, and since the widget is adaptive it does not fit.
$ ("# 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 >

Add the code to the question, otherwise the fortunetellers are on vacation

ArchDemon2021-09-26 13:58:51

Please clarify your specific problem or provide more detailed information on what exactly you need. As it stands, it is difficult to understand exactly what you are asking.

Дух сообщества2021-09-26 13:59:46

@ Community spirit Added code, it doesn't work

A M2021-09-26 14:15:18

@ArchDemon added code

A M2021-09-26 14:16:28

@ Jean-Claude is another question. I'm more interested in why my code doesn't work

A M2021-09-26 18:42:38