모달 대화 상자 표시 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>

COPY. 내가하려고하는 것은 선택된 날에 대한 작업으로 모달 대화 상자를 보여주는 것입니다. 내가하려고 해요 :

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

그러나 대화 상자가 표시되지 않습니다.

자바 스크립트 :

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

당신은 나에게 표 셀을 눌러 대화 상자를 표시하는 방법에 대한 조언을 줄 수 있습니까? 안부

출처

2016-09-10 HeberonYT

을 이용해야 하는가? – brk

Hi 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

대단히 감사합니다. 스크립트 추가하기 "< script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> " 캘린더 기능이 작동하지 않고 현재 날짜가 표시되지 않습니다. 대화 상자가 표시되지 않고 추가 한 직접 경고 만 표시되지만 스타일이있는 모달은 테이블에서 실행되지 않습니다. 제가 사용하는 모달은 다음과 같습니다 : https://github.com/CreativeDream/jquery.modal 모든 노력에 감사드립니다. – HeberonYT

모달 대화 상자 표시 jquery

답변

관련 문제