首页 > 解决方案 > 未显示通过按钮触发的 JQuery 对话框

问题描述

我正在努力<div>使用 Jquery 中的按钮打开一个。您可以在此处查看我的页面(不起作用)。

下面是我页面的代码。可能我没有正确调用对话框,或者它与我正在使用的 fullCalendar 插件有某种冲突。

该对话框包含我需要的内容,但未显示。

      <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
      <link rel="icon" href="img/clip.ico" />
      <link rel='stylesheet' href='js/fullcalendar/fullcalendar.css' />
      <link rel="stylesheet" href="css/kube.min.css" />
      <link rel="stylesheet" href="css/stile.css" />
      
      <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
      <script src='js/fullcalendar/jquery.min.js'></script>
      <script src='js/fullcalendar/moment.min.js'></script>
      <script src='js/fullcalendar/fullcalendar.js'></script>
      <script src='js/fullcalendar/it.js'></script>


     </head>
     <body>
    
    <button id="apricorsocae">lezioni corso CAE</button>
    
<div id="corsocae" title="lezioni corso CAE" style="display: none;"></div>

    <script>
      $( function() {
        $( "#corsocae" ).dialog({
          autoOpen: false,
          show: {
            effect: "blind",
            duration: 1000
          },
          hide: {
            effect: "explode",
            duration: 1000
          }
        });
     
        $( "#apricorsocae" ).on( "click", function() {
          $( "#corsocae" ).dialog( "open" );
        });
      } );
    </script>

标签: buttonjquery-ui-dialog

解决方案


找出冲突的部分:

<script src='js/fullcalendar/jquery.min.js'></script>

我已经删除了它,它似乎工作正常。


推荐阅读