Question

我第一次使用Kendo UI并且弹出了kendo ui grid。当我点击网格中的链接时弹出窗口没有显示。我尝试了很多，但无法识别我做错了。单击“Say Hello”链接时，应显示弹出窗口。

这是我的代码。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="styles/kendo.common.min.css" rel="stylesheet" />
    <link href="styles/kendo.default.min.css" rel="stylesheet" />
    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
    <script src="js/kendo.mobile.popover.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#grid").kendoGrid();
        });

        $(document).ready(function () {
            $("#foo").kendoPopup();
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <table id="grid">
  <thead>
      <tr>
          <th data-field="title">Title</th>
          <th data-field="year">Year</th>
          <th data-field="popup">Popup</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td>Star Wars: A New Hope</td>
          <td>1977</td>
          <td> <a data-role="button" href="#foo" data-rel="popover">Say Hello</a></td>
      </tr>
      <tr>
          <td>Star Wars: The Empire Strikes Back</td>
          <td>1980</td>
          <td class="k-popup"> <a data-role="button" href="#foo" data-rel="popover">Say Hello</a></td>
      </tr>   
      <tr>
          <td>Star Wars: The Empire Strikes Back</td>
          <td>1980</td>
          <td> <a data-role="button" href="#foo" data-rel="popover">Say Hello</a></td>
      </tr>       
  </tbody>
 </table>
    <div id="foo" data-role="popover" class="k-popup">
     <div data-role="view" style="background-color:blue">
         Hello world!
     </div>
 </div>
    </form>
</body>
</html>

enter image description here

在kendo ui中单击链接时弹出不显示

0 个答案: