Question

我想创建一个模型页面，其工作原理与stackoverflow收件箱弹出窗口相同。就像下面的图片一样，当我们点击收件箱图标时，它看起来像一个小盒子，里面的小加载程序显示了消息/评论。对？ >>展开后，取决于文本/表格/消息。

我如何添加ajax jQuery来加载div内的任何页面，其中div的name和id = "pageaload"，例如，加载的网址为google.com

投机要求请参阅页面，以免出现人为错误，因为我的英语不好，可能无法解释我的问题并导致我对此表示怀疑和声誉不好。

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和需求。

提示：

如果您的目标地址（应加载到目标元素中）具有另一个url或protocol，则可能会由于Cross Origin问题而出现一些安全错误。我选择的地址（https://www.api.github.com）在服务器端具有Allow-Access-*权限，因此，我可以使用它。如果您要加载的目标地址存在于当前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替换为您的页面以进行访问。 stackoverflow位于不同的域中，由于CORS策略，该域将被阻止。

“ CORS策略已阻止从原点'null'访问'https://stackoverflow.com/'处的XMLHttpRequest：在请求的资源上没有'Access-Control-Allow-Origin'标头。”

更多详细信息：Why does my JavaScript get a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error when Postman does not?

单击链接时弹出，有点像CSS中的stackoverflow收件箱

2 个答案: