jquery - 使用qtip2显示Html页面 inside 覆盖

  显示原文与译文双语对照的内容
0 0

我正在尝试在当前页面顶部显示一个html页面 inside 。

这就是我希望在网页上方放置的页面,而不在左侧覆盖菜单的地方偏移它。

经过一些研究,我认为最好的赌注是 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>
时间: 原作者:

0 0

我看到了一些错误。 首先,你需要在 a 标记之间放置文本,这样当你悬停它时,函数就可以运行了。 因为你首先需要所有 api 变量,所以你的element 变量没有被定义。 试试这个代码它应该能正常工作:

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...';
 }
 }
});

原作者:
...