顯示模式對話框jquery

我試圖顯示一個模式對話框按下表單元格，但不起作用。按鈕工作得很好，但不在桌子上。我的代碼如下：顯示模式對話框jquery

HTML

<table class="clndr-table" border="0" cellspacing="0" cellpadding="0"> 
    <thead> 
     <tr class="header-days"> 
      <td class="header-day">S</td> 
      <td class="header-day">M</td> 
      <td class="header-day">T</td> 
      <td class="header-day">W</td> 
      <td class="header-day">T</td> 
      <td class="header-day">F</td> 
      <td class="header-day">S</td> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td class="day past adjacent-month last-month calendar-day-2015-08-30"> 
       <div class="day-contents">30</div> 
      </td> 
      <td class="day past adjacent-month last-month calendar-day-2015-08-31"> 
       <div class="day-contents">31</div> 
      </td> 
      <td class="day past calendar-day-2015-09-01"> 
       <div class="day-contents" href="#alert" id="alert">1</div> 
      </td> 
      <td class="day past calendar-day-2015-09-02"> 
       <div class="day-contents">2</div> 
      </td> 
      <td class="day past calendar-day-2015-09-03"> 
       <div class="day-contents">3</div> 
      </td> 
      <td class="day past calendar-day-2015-09-04"> 
       <div class="day-contents">4</div> 
      </td> 
      <td class="day past calendar-day-2015-09-05"> 
       <div class="day-contents">5</div> 
      </td> 
     </tr> 
     <tr> 
      <td class="day past calendar-day-2015-09-06"> 
       <div class="day-contents">6</div> 
      </td> 
      <td class="day past calendar-day-2015-09-07"> 
       <div class="day-contents">7</div> 
      </td> 
      <td class="day past calendar-day-2015-09-08"> 
       <div class="day-contents">8</div> 
      </td> 
      <td class="day past calendar-day-2015-09-09"> 
       <div class="day-contents">9</div> 
      </td> 
      <td class="day past event calendar-day-2015-09-10"> 
       <div class="day-contents">10</div> 
      </td> 
      <td class="day past event calendar-day-2015-09-11"> 
       <div class="day-contents">11</div> 
      </td> 
      <td class="day past event calendar-day-2015-09-12"> 
       <div class="day-contents">12</div> 
      </td> 
     </tr> 
     <tr> 
      <td class="day past event calendar-day-2015-09-13"> 
       <div class="day-contents">13</div> 
      </td> 
      <td class="day past event calendar-day-2015-09-14"> 
       <div class="day-contents">14</div> 
      </td> 
      <td class="day past calendar-day-2015-09-15"> 
       <div class="day-contents">15</div> 
      </td> 
      <td class="day past calendar-day-2015-09-16"> 
       <div class="day-contents">16</div> 
      </td> 
      <td class="day past calendar-day-2015-09-17"> 
       <div class="day-contents">17</div> 
      </td> 
      <td class="day past calendar-day-2015-09-18"> 
       <div class="day-contents">18</div> 
      </td> 
      <td class="day past calendar-day-2015-09-19"> 
       <div class="day-contents">19</div> 
      </td> 
     </tr> 
     <tr> 
      <td class="day past calendar-day-2015-09-20"> 
       <div class="day-contents">20</div> 
      </td> 
      <td class="day past event calendar-day-2015-09-21"> 
       <div class="day-contents">21</div> 
      </td> 
      <td class="day past event calendar-day-2015-09-22"> 
       <div class="day-contents">22</div> 
      </td> 
      <td class="day past event calendar-day-2015-09-23"> 
       <div class="day-contents">23</div> 
      </td> 
      <td class="day past calendar-day-2015-09-24"> 
       <div class="day-contents">24</div> 
      </td> 
      <td class="day past calendar-day-2015-09-25"> 
       <div class="day-contents">25</div> 
      </td> 
      <td class="day today calendar-day-2015-09-26"> 
       <div class="day-contents">26</div> 
      </td> 
     </tr> 
     <tr> 
      <td class="day calendar-day-2015-09-27"> 
       <div class="day-contents">27</div> 
      </td> 
      <td class="day calendar-day-2015-09-28"> 
       <div class="day-contents">28</div> 
      </td> 
      <td class="day calendar-day-2015-09-29"> 
       <div class="day-contents">29</div> 
      </td> 
      <td class="day calendar-day-2015-09-30"> 
       <div class="day-contents">30</div> 
      </td> 
      <td class="day adjacent-month next-month calendar-day-2015-10-01"> 
       <div class="day-contents">1</div> 
      </td> 
      <td class="day adjacent-month next-month calendar-day-2015-10-02"> 
       <div class="day-contents">2</div> 
      </td> 
      <td class="day adjacent-month next-month calendar-day-2015-10-03"> 
       <div class="day-contents">3</div> 
      </td> 
     </tr> 
    </tbody> 
</table>

複製到剪貼板選擇此表生成每月的天日曆形式。我試圖做的是顯示一個模式對話框與所選日期的任務。我想：

<td class="day past calendar-day-2015-09-01"> 
    <div class="day-contents" href="#alert" id="alert">1</div> 
</td>

但該對話框不會出現。

的Javascript：

$(document).ready(function(e) { 
     //alert 
    $('a#alert').click(function(){ 
     modal({ 
      type : 'alert', 
      title : 'Alert', 
      text : "Simple Message!" 
     }); 
    }); 
});

你能給我如何顯示按表格單元格的對話框上的任何建議嗎？關於

來源

2016-09-10 HeberonYT

？ – brk

嗨Heberon，很高興知道您使用的是哪種工具。如果你想建立你自己的模式這個鏈接是一個很好的幫助，我已經嘗試http://www.w3schools.com/howto/howto_css_modals.asp – Eli

您的表格中沒有錨標籤。在jQuery選擇，你應該使用

$('div#alert').click(function(){})

$(document).ready(function(e) { 
 
     //alert 
 
    $('div#alert').click(function(){ 
 
     alert('clicked'); 
 
     modal({ 
 
      type : 'alert', 
 
      title : 'Alert', 
 
      text : "Simple Message!" 
 
     }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="clndr-table" border="0" cellspacing="0" cellpadding="0"> 
 
    <thead> 
 
     <tr class="header-days"> 
 
      <td class="header-day">S</td> 
 
      <td class="header-day">M</td> 
 
      <td class="header-day">T</td> 
 
      <td class="header-day">W</td> 
 
      <td class="header-day">T</td> 
 
      <td class="header-day">F</td> 
 
      <td class="header-day">S</td> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
      <td class="day past adjacent-month last-month calendar-day-2015-08-30"> 
 
       <div class="day-contents">30</div> 
 
      </td> 
 
      <td class="day past adjacent-month last-month calendar-day-2015-08-31"> 
 
       <div class="day-contents">31</div> 
 
      </td> 
 
      <td class="day past calendar-day-2015-09-01"> 
 
       <div class="day-contents" href="#alert" id="alert">1</div> 
 
      </td> 
 
      <td class="day past calendar-day-2015-09-02"> 
 
       <div class="day-contents">2</div> 
 
      </td> 
 
      <td class="day past calendar-day-2015-09-03"> 
 
       <div class="day-contents">3</div> 
 
      </td> 
 
      <td class="day past calendar-day-2015-09-04"> 
 
       <div class="day-contents">4</div> 
 
      </td> 
 
      <td class="day past calendar-day-2015-09-05"> 
 
       <div class="day-contents">5</div> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td class="day past calendar-day-2015-09-06"> 
 
       <div class="day-contents">6</div> 
 
      </td> 
 
      <td class="day past calendar-day-2015-09-07"> 
 
       <div class="day-contents">7</div> 
 
      </td> 
 
      <td class="day past calendar-day-2015-09-08"> 
 
       <div class="day-contents">8</div> 
 
      </td> 
 
      <td class="day past calendar-day-2015-09-09"> 
 
       <div class="day-contents">9</div> 
 
      </td> 
 
      <td class="day past event calendar-day-2015-09-10"> 
 
       <div class="day-contents">10</div> 
 
      </td> 
 
      <td class="day past event calendar-day-2015-09-11"> 
 
       <div class="day-contents">11</div> 
 
      </td> 
 
      <td class="day past event calendar-day-2015-09-12"> 
 
       <div class="day-contents">12</div> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td class="day past event calendar-day-2015-09-13"> 
 
       <div class="day-contents">13</div> 
 
      </td> 
 
      <td class="day past event calendar-day-2015-09-14"> 
 
       <div class="day-contents">14</div> 
 
      </td> 
 
      <td class="day past calendar-day-2015-09-15"> 
 
       <div class="day-contents">15</div> 
 
      </td> 
 
      <td class="day past calendar-day-2015-09-16"> 
 
       <div class="day-contents">16</div> 
 
      </td> 
 
      <td class="day past calendar-day-2015-09-17"> 
 
       <div class="day-contents">17</div> 
 
      </td> 
 
      <td class="day past calendar-day-2015-09-18"> 
 
       <div class="day-contents">18</div> 
 
      </td> 
 
      <td class="day past calendar-day-2015-09-19"> 
 
       <div class="day-contents">19</div> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td class="day past calendar-day-2015-09-20"> 
 
       <div class="day-contents">20</div> 
 
      </td> 
 
      <td class="day past event calendar-day-2015-09-21"> 
 
       <div class="day-contents">21</div> 
 
      </td> 
 
      <td class="day past event calendar-day-2015-09-22"> 
 
       <div class="day-contents">22</div> 
 
      </td> 
 
      <td class="day past event calendar-day-2015-09-23"> 
 
       <div class="day-contents">23</div> 
 
      </td> 
 
      <td class="day past calendar-day-2015-09-24"> 
 
       <div class="day-contents">24</div> 
 
      </td> 
 
      <td class="day past calendar-day-2015-09-25"> 
 
       <div class="day-contents">25</div> 
 
      </td> 
 
      <td class="day today calendar-day-2015-09-26"> 
 
       <div class="day-contents">26</div> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td class="day calendar-day-2015-09-27"> 
 
       <div class="day-contents">27</div> 
 
      </td> 
 
      <td class="day calendar-day-2015-09-28"> 
 
       <div class="day-contents">28</div> 
 
      </td> 
 
      <td class="day calendar-day-2015-09-29"> 
 
       <div class="day-contents">29</div> 
 
      </td> 
 
      <td class="day calendar-day-2015-09-30"> 
 
       <div class="day-contents">30</div> 
 
      </td> 
 
      <td class="day adjacent-month next-month calendar-day-2015-10-01"> 
 
       <div class="day-contents">1</div> 
 
      </td> 
 
      <td class="day adjacent-month next-month calendar-day-2015-10-02"> 
 
       <div class="day-contents">2</div> 
 
      </td> 
 
      <td class="day adjacent-month next-month calendar-day-2015-10-03"> 
 
       <div class="day-contents">3</div> 
 
      </td> 
 
     </tr> 
 
    </tbody> 
 
</table>

你在使用模式 - 對話

來源

2016-09-10 07:43:52

非常感謝你的幫助添加腳本「腳本src =「https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js」>「日曆功能不起作用，並且不顯示當天。該對話框不顯示，只有直接提醒您添加，但帶有樣式的模式不會從表格中運行。我使用的模式如下：https://github.com/CreativeDream/jquery.modal 謝謝你的所有努力 – HeberonYT

顯示模式對話框jquery

回答

相關問題