Question

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

http://i.imgur.com/ykwrlg0.jpg 这是一张图片，用于演示我之后的内容，白页是我想要放置在我的网页顶部的叠加层，它偏向右边占据空间而不覆盖左边的菜单

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

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

＆＃13;

$(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
        }
    }
	});
 });

＆＃13;

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

＆＃13;

<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>

＆＃13;

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页面

1 个答案: