【问题标题】:show modal dialog jquery显示模态对话框 jquery
【发布时间】:2016-09-10 15:43:52
【问题描述】:

我试图显示一个模态对话框按下表格单元格,但不起作用。 Button 效果很好,但不在表格中。 我的代码如下:

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!"
        });
    });
});

你能给我一些关于如何通过按下表格单元格来显示对话框的建议吗? 问候

【问题讨论】:

  • 模态对话框用什么?
  • 嗨,Heberon,很高兴知道您使用的是哪种工具。如果您想构建自己的模式,这个链接是一个很大的帮助,我已经尝试过w3schools.com/howto/howto_css_modals.asp

标签: javascript jquery html modal-dialog


【解决方案1】:

您的表格中没有锚标记。在 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>

【讨论】:

  • 非常感谢您的帮助添加脚本“
猜你喜欢
  • 1970-01-01
  • 2023-03-26
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-10-18
  • 1970-01-01
  • 1970-01-01
  • 2015-03-22
相关资源
最近更新 更多