在 qTip 内打开 nyroModal 窗口

发布于 2024-12-16 16:45:00 字数 1702 浏览 0 评论 0原文

我正在使用 qTip2,我的工具提示之一位于标签 DIV 中。在该 DIV 内,我有一个链接,应打开一个 nyroModal 窗口(ajax 页面)。当我将鼠标悬停并单击链接打开像 target="_blank" 这样的简单页面时,它仅第一次打开,下一次打开。

这是一个现场演示:http://jsfiddle.net/Ja9dN/2/< /strong>

HTML:

<div style="margin:50px 0 0 50px">

    <span class="qTip">Hover to see the Tooltip with Content</span>

    <div class="qTipContent">...<a href="http://craigsworks.com/projects/qtip2/" class="modalBox">This link</a> opens nyroModal window only once ...  </div>
    <p>&nbsp;</p>
    <p><a href="http://craigsworks.com/projects/qtip2/" class="modalBox">This link open window</a></p>


</div>

JS:

$('.qTip').qtip({
               content: {
                  text: function(api) {
                      return $('.qTipContent');
                  }
               },
               position: {
                  my: 'bottom center',
                  at: 'top center',
                  adjust: {y: 0 }
               },
               style: {
                  classes: 'ui-tooltip-light ui-tooltip-shadow ui-tooltip-rounded',
                  width: 390
                  },            
               hide: {
                  delay: 250,
                  fixed: true
               }               
});

$(".modalBox").nyroModal();

谢谢

已解决:

将内容调用更改为:

content: {
    text: $('.qTipContent')                  
},

I'm using qTip2 and one of my tooltip is in tag DIV. Inside that DIV I have a link which should open a nyroModal window (ajax page). It's opening only 1st time and the next one when i hover and clik on link opening as simple page like target="_blank".

Here is a Live Demo: http://jsfiddle.net/Ja9dN/2/

HTML:

<div style="margin:50px 0 0 50px">

    <span class="qTip">Hover to see the Tooltip with Content</span>

    <div class="qTipContent">...<a href="http://craigsworks.com/projects/qtip2/" class="modalBox">This link</a> opens nyroModal window only once ...  </div>
    <p> </p>
    <p><a href="http://craigsworks.com/projects/qtip2/" class="modalBox">This link open window</a></p>


</div>

JS:

$('.qTip').qtip({
               content: {
                  text: function(api) {
                      return $('.qTipContent');
                  }
               },
               position: {
                  my: 'bottom center',
                  at: 'top center',
                  adjust: {y: 0 }
               },
               style: {
                  classes: 'ui-tooltip-light ui-tooltip-shadow ui-tooltip-rounded',
                  width: 390
                  },            
               hide: {
                  delay: 250,
                  fixed: true
               }               
});

$(".modalBox").nyroModal();

Thanks

SOLVED:

changed the content call to:

content: {
    text: $('.qTipContent')                  
},

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

仅此而已 2024-12-23 16:45:00

我不知道 qTip2 是如何工作的,或者是否存在兼容性问题或...但我认为可能的解释是由于 div 刷新而导致链接 - 标记 a - 和点击处理程序之间的链接丢失例如...所以您可以尝试直接在链接后面插入代码:

<p>
<a href="http://craigsworks.com/projects/qtip2/" class="modalBox">This link open window</a>
<script type="text/javascript">
$(document).ready(function(){   
    $(function() {
        $(".modalBox").nyroModal();
    });
});
</script>
</p>

I don't know how qTip2 works, or if there are compatibility issues or... but I think that a possible explanation is the loss of the link between the link - tag a - and the click handler because of a refresh of the div for example... So you could try inserting the code directly after the link:

<p>
<a href="http://craigsworks.com/projects/qtip2/" class="modalBox">This link open window</a>
<script type="text/javascript">
$(document).ready(function(){   
    $(function() {
        $(".modalBox").nyroModal();
    });
});
</script>
</p>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文