Question

我以前从未遇到过这个问题。我将此代码实现到我的应用程序http://jsfiddle.net/TC6Gr/119/

中

我试过了

在没有我的代码的情况下将所有jsfiddle代码粘贴到新页面中，它不起作用。
在$(document).ready...中包装/打开脚本，但它不起作用。
当我在点击功能中发出警报时，警报会显示，但不会显示模式？

Answer 1

你包括JQuery 1.10.2，JSFiddle正在使用jquery 2.1.0

JSFiddle还包括以下库

bootstrap.min.css 
-(http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css)
bootstrap.min.js
-(http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js)
bootstrap-datetimepicker.min.js
-(https://rawgit.com/smalot/bootstrap-datetimepicker/master/js/bootstrap-datetimepicker.min.js)
bootstrap-datetimepicker.css
-(https://rawgit.com/smalot/bootstrap-datetimepicker/master/css/bootstrap-datetimepicker.css)

所以尝试包括......

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js" type="text/javascript"></script>
<link src ="https://rawgit.com/smalot/bootstrap-datetimepicker/master/css/bootstrap-datetimepicker.css"></link>
<link src ="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"></link>
<script src ="https://rawgit.com/smalot/bootstrap-datetimepicker/master/js/bootstrap-datetimepicker.min.js"></script>
<script src ="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

Answer 2

所以尝试从这里开始，它还没有完全完成，但是我可以通过这个获得模态：

<html>
<head>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js" type="text/javascript"></script>
    <link src ="https://rawgit.com/smalot/bootstrap-datetimepicker/master/css/bootstrap-datetimepicker.css"></link>
    <script src ="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script src ="https://rawgit.com/smalot/bootstrap-datetimepicker/master/js/bootstrap-datetimepicker.min.js"></script>
    <link src ="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"></link>
    <style>
        body {
            padding-top:20px;
        }
        .start-date {
            padding-left:0;
        }
        .end-date {
            padding-right:0;
        }
        .date>input:hover,.date>input:hover {
            cursor:pointer;
        }
        .time-help {
            margin-top:40px;
        }
        @media(max-width:767px) {
            .start-date {
                padding:0 0 5px 0;
            }
            .end-date {
                padding:5px 0 0 0;
            }
            .time-help {
                margin-top:10px;
            }
        }
    </style>
    <script>
    $(function(){
        $('#time-start').datetimepicker({
            format: 'mm/dd/yyyy hh:ii',
            autoclose: true,
            pickerPosition: "bottom-left",
            maxView: 3,
            minuteStep: 1,
            endDate: new Date()
        })

        $('#time-end').datetimepicker({
            format: 'mm/dd/yyyy hh:ii',
            autoclose: true,
            pickerPosition: "bottom-left",
            maxView: 3,
            minuteStep: 1,
            endDate: new Date()
        })

         $("td#my_clickable_cell").bind("click",function() {

              $('#myModal').modal('show');
           });
    });
    </script>

</head>
<body>

<table class="table table-bordered">
    <thead>
        <tr>
            <td >Name</td>
            <td>Sunday</td>
            <td>Monday</td>
        </tr>
    </thead>
    <tbody>
    <tr>
            <td>Name1</td>
            <td id="my_clickable_cell" data-value="1">16:00-18:00</td>
            <td id="my_clickable_cell" data-value="1"></td>
        </tr>
        <tr>
            <td>Name2</td>
            <td id="my_clickable_cell" data-value="3"></td>
            <td id="my_clickable_cell" data-value="3">16:00-18:00</td>
        </tr> 
    </tbody>
</table>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                 <h4 class="modal-title" id="myModalLabel">Modal title</h4>

            </div>
            <div class="modal-body">
                <div class="col-md-12">
                    <div class="row">
    <form class="form-group col-sm-12" role="form">
      <label class="col-sm-2 control-label">Select Times</label>

      <div class="col-sm-8">
        <div class="col-sm-6 start-date">
          <div class='input-group date' id="time-start">
            <input type='text' class="form-control" placeholder="Start Time" readonly>
            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
          </div>
        </div>

        <div class="col-sm-6 end-date">
          <div class='input-group date' id="time-end">
            <input type='text' class="form-control" placeholder="End Time" readonly>
            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
          </div>
        </div>

        <p class="help-block time-help">Select start and end times</p>
      </div>

      <div class="col-sm-2">
        <button class="btn btn-default" type="submit">Submit</button>
      </div>
    </form>
  </div>
  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
</div>
</body>
</html>

Answer 3

代码中出现了多个错误 1.模式弹出窗口没有隐藏在页面加载上 - 尝试先用css隐藏它。 2. jquery函数（datetime-picker）可能不适合您。 - 但是你可以使用和html包含一个日期时间选择器检查this link以获取有关该

的更多信息

尝试这些并告诉我您在开发人员控制台上遇到的错误 - 我假设您使用的是Chrome浏览器。

为什么这段代码在jsfiddle中工作，但不在我的html页面中

3 个答案: