Semantic-UI特殊PopUp没有显示

时间:2015-01-02 04:18:00

标签: javascript jquery html5 semantic-ui

我正在尝试使用自定义html构建一个特殊的弹出窗口,以便稍后添加内容...

我的控制台显示此消息=弹出:找不到弹出窗口的可见位置。

$(document)
  .ready(function() {

    $('.item.messages')
      .popup({
        inline: true,
        hoverable: true,
        popup: '.special.popup',
        position: 'bottom left',
        delay: {
          show: 300,
          hide: 800
        }
      });
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="item messages">
  <i class="mail icon"></i>	

  <div class="ui special popup">
    <div class="header">Custom Header</div>
    <div class="ui button">Click Me</div>
  </div>

</a>

有什么想法吗?

3 个答案:

答案 0 :(得分:1)

试试这个代码,你需要调用div来弹出

 $(document)
      .ready(function() {

        $('.special.popup')
          .popup({
            inline: true,
            hoverable: true,
            popup: '.special.popup',
            position: 'bottom left',
            delay: {
              show: 300,
              hide: 800
            }
          });
      });

答案 1 :(得分:0)

setTimeout(function(){
 $('.item.messages')
  .popup({
    inline: true,
    hoverable: true,
    popup: '.special.popup',
    position: 'bottom left',
    delay: {
      show: 300,
      hide: 800
    }
  });

 }, 1000);

答案 2 :(得分:-2)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="item messages">
  <i class="mail icon"></i> 
</a>
<div class="ui special popup">
   <div class="header">Custom Header</div>
   <div class="ui button">Click Me</div>
</div>

试试这个。 与Amal的解决方案相结合。我相信在容器外面放置爆破div会更好。