[英]show modal dialog 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>
COPY TO CLIPBOARD SELECT 此表以日歷形式生成月份中的天數。 我嘗試做的是顯示一個模式對話框,其中包含所選日期的任務。 我試圖:
<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!"
});
});
});
關於如何通過按下表格單元格來顯示對話框,您能給我任何建議嗎? 問候
您的表中沒有錨標記。 在 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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.