语义ui弹出窗口显示div内容未正确显示。还需要显示表行数据

时间:2018-05-18 13:25:07

标签: javascript html popup semantic-ui

有人能给我一个解决这个语义 - ui代码弹出错误的方法吗?

<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" >
   <table class="ui table" id="table" >
      <thead>
         <tr>
            <th>Name</th>
            <th>Registration Date</th>
            <th>E-mail address</th>
            <th>Premium Plan</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>John Lilki</td>
            <td>September 14, 2013</td>
            <td>jhlilk22@yahoo.com</td>
            <td>No</td>
         </tr>
         <tr>
            <td>Jamie Haringtonjhlilk22@yahoo.cojhlilk22@yahoo.cojhlilk22@yahoo.cojhlilk22@yahoo.cojhlilk22@yahoo.co</td>
            <td>January 11, 2014September 14,jhlilk22@yahoo.co 2013September 14, 2013September 14, 2013</td>
            <td>jamieharingonton@yahoo.comJamie jhlilk22@yahoo.coHaringtonJamie HaringtonJamie Harington</td>
            <td>YesJamie HaringtonJamie jhlilk22@yahoo.cojhlilk22@yahoo.coHaringtonJamie HaringtonJamie Harington</td>
         </tr>
         <tr>
            <td>Jill Lewis</td>
            <td>May 11, 2014</td>
            <td>jilsewris22@yahoo.com</td>
            <td>Yes</td>
         </tr>
      </tbody>
   </table>
</div>
<div class="ui custom popup top left transition hidden" id="pop">
   popup content
</div>
"[alphaNumeric]String/String.xcl"

语义ui弹出窗口显示div内容未正确显示。另外,我需要显示表格行数据。

1 个答案:

答案 0 :(得分:2)

我找到的最佳解决方案在下面给出了链接。请仔细阅读。

点击表行事件上的语义ui弹出以显示div内容。

    $(document).on('click', 'table td', function() {
    $(this)
       .popup({
           popup: $('#pop'),
           inline:true,
            on:'click'
       })
       .popup('show');
});

visit  : [https://codepen.io/manikandanpa/pen/xjmWmg?editors=1010][1]