Откройте окно nyroModal внутри qTip - PullRequest
Новая
       37

Откройте окно nyroModal внутри qTip

0 голосов
/ 19 ноября 2011

Я использую qTip2 , и одна из моих подсказок находится в теге DIV. Внутри этого DIV у меня есть ссылка, которая должна открыть окно nyroModal (страница ajax). Он открывается только в первый раз и следующий раз, когда я нахожу и нажимаю на ссылку, открывая ее на простой странице, например target="_blank".

Вот демоверсия: 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>&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')                  
},

1 Ответ

0 голосов
/ 19 ноября 2011

Я не знаю, как работает qTip2, или есть ли проблемы с совместимостью или ... но я думаю, что возможное объяснение - потеря связи между ссылкой - тегом a - и обработчиком клика из-за обновления Div например, так что вы можете попробовать вставить код сразу после ссылки: 

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