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>

所以＆＃34;似乎＆＃34;工作正常，但我不能点击日历中的任何内容，因为它出现在背景中。

这是一张供参考的图片 enter image description here

任何和所有帮助都有效！

我是很多新手，所以如果解决方案有点棘手，我们会欢迎详细解释！：）

Answer 1

这是一个CSS问题：

模态日期选择器位于模态之后：

CSS ：

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

如果datepicker小部件很好.ui-datepicker

无法将DatePicker添加到模态 - 在背景中显示

1 个答案: