使用 qtip2 在叠加层内显示 Html 页面

Question

我正在尝试在当前页面顶部的叠加层中显示 html 页面。

http://i.imgur.com/ykwrlg0.jpg 这是一张展示我所追求的图片，白色页面是我想放在网页顶部的叠加层，它向右偏移以占据 space 而不覆盖菜单左边。

经过一些研究，我认为最好的选择是 qtip2，但我无法使其正常工作。

当工具提示确实加载时，我得到一个解析 xml 错误工具提示。我想如果我可以让它弹出内容然后我可以正确地设置它的样式。

$(document).ready(function()
 {
     // MAKE SURE YOUR SELECTOR MATCHES SOMETHING IN YOUR HTML!!!
     $('.changePage').qtip({
       content: {
         text: function(event, api) {
           $.ajax({
             url: element.data('url') // Use data-url attribute for the URL
           })
           .then(function(content) {
             
             // Set the tooltip content upon successful retrieval
             api.set('content.text', content);
           }, function(xhr, status, error) {
                // Upon failure... set the tooltip content to the status and error value
                api.set('content.text', status + ': ' + error);
            });

            return 'Loading...'; // Set some initial text
        }
    }
 });
 });

.block:hover {
 cursor: pointer;
 background-color: rgba(0,0,0,0.8);
 color: #BE1E2D;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block" id = "change1">
  <a href='change.html' class = "changePage"></a>
  
  <div class="big-text">Popup</div>


</div>

Answer 1

我看到了一些错误。首先，您需要将文本放在 a 标签之间，这样当您悬停它时，函数可以运行。那么你的 element 变量没有被定义，因为你首先需要所有的 api 变量。试试这段代码。它应该有效：

HTML:

<div class="block" id ="change1">
    <a data-url="change.html" class="changePage">Popup</a>
    <div class="big-text"></div>
</div>

JS:

$('.changePage').qtip({
    content: {
        text: function(event, api) {
            $.ajax({
                url: api.elements.target.data('url')
            }).done(function(html) {
                api.set('content.text', html);
            }).fail(function(xhr, status, error) {
                api.set('content.text', status + ': ' + error);
            });
            return 'Loading...';
        }
    }
});

使用 qtip2 在叠加层内显示 Html 页面

Display Html page inside overlay using qtip2

html

jquery

qtip2