javascript - 将 DatePicker 添加到模态时出现问题 - 在背景中显示

Question

我正在尝试插入我在这里找到的 DatePicker:http://www.eyecon.ro/bootstrap-datepicker/但我无法让它显示在我的模态前面。 (我可以在模态的背景中看到它)

我不确定我是否错误地实现了它，或者我是否需要将其安装在模式显示的顶部。

这是我的 Bundle.config，我在其中添加了 datepicker.css 和 bootstrap-datapicker.js 文件。

public class BundleConfig
{
    // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate*"));

        // Use the development version of Modernizr to develop with and learn from. Then, when you're
        // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));

        bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.js",
                  "~/Scripts/respond.js"));

        bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap.css",
                  "~/Content/datepicker.css",
                  "~/Content/site.css"));

        bundles.Add(new ScriptBundle("~/bundles/myscript").Include(
                  "~/Scripts/MyScripts.js", "~/Scripts/bootstrap-datepicker.js"));
    }
}

这是我的模态

<div class="modal fade" id="createMovie" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header" style="background-color: #428bca">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel" style="font-size: 30px; font-style:oblique; color:white">Create</h4>
         </div>
         <div class="modal-body">
            <table class="table" id="createTable">
               <tr>
                  <th class="col-lg-4">
                     <h5 style="font-size:x-large"><span style="font-weight:bolder">Title</span></h5>
                  </th>
                  <th class="col-lg-7 col-lg-offset-1">
                     <input type="text" name="createName" style="text-align: center; height: 35px; font-size: 20px; width: 100%" placeholder="Title" />
                  </th>
               </tr>
               <tr>
                  <th class="col-lg-4">
                     <h5 style="font-size:x-large"><span style="font-weight:bolder">Release Date</span></h5>
                  </th>
                  <th class="col-lg-7 col-lg-offset-1">
                     <input type="text" name="createRelease" id="datepicker" style="text-align:center; height:35px; font-size:20px; width:100%" placeholder="Date (mm/dd/yyyy)" />
                  </th>
               </tr>
               <tr>
                  <th class="col-lg-4">
                     <h5 style="font-size:x-large"><span style="font-weight:bolder">Description</span></h5>
                  </th>
                  <th class="col-lg-7 col-lg-offset-1">
                     <input type="text" name="createDescription" style="text-align:center; height:35px; font-size:20px; width:100%" placeholder="Description" />
                  </th>
               </tr>
            </table>
         </div>
         <div class="modal-footer">
            <button type="button" onclick="createFunction(this)" class="btn btn-success">Create</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
         </div>
      </div>
   </div>
</div>

所以它“似乎”工作正常，只是我无法单击日历中出现在背景中的任何内容。

这是一张图片供引用

感谢所有帮助!

我对这方面的很多东西都很陌生，所以如果解决方案有点棘手，我们将欢迎详细的解释!:)

Answer 1

这是一个 CSS 问题:

模态日期选择器位于模态后面，因此:

CSS:

.datepicker{
    z-index: 1100 !important;
}

如果日期选择器小部件正常.ui-datepicker