麻烦将DatePicker添加到模态 - 在背景幕中显示 [英] Trouble Adding DatePicker to Modal - Displays in backdrop

问题描述

我正在尝试插入一个我在这里找到的DatePicker： http://www.eyecon.ro / bootstrap-datepicker / ，但是我无法将其显示在我的模态前面。 （我可以在模态的背景下看到它）

I am trying to insert a DatePicker I found here: http://www.eyecon.ro/bootstrap-datepicker/ but I cannot get it to display in front of my modal. (I can see it in the backdrop of the modal)

我不知道我是否执行不正确，或者如果我需要将其设置在modal的显示。

I am not sure if I either implemented it incorrectly, or if I need to rig it to be on top of the modal's display.

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

Here is my Bundle.config where I added the datepicker.css and bootstrap-datapicker.js files.

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>

所以似乎可以正常工作，除了我无法点击日历中的任何内容正在出现在背景中。

So it "seems" to be working fine, except that I cannot click anything in the calendar as it is appearing in the backdrop.

以下是图片供参考

Here is an image for reference

任何和所有的帮助都会被欣赏！

Any and all help apprecaited!

我很新颖，所以如果解决方案有点棘手，详细的解释将会受到欢迎！：

推荐答案

这是一个css问题：

模态的datepicker是在模态之后：

The modal datepicker is behind the modal so :

CSS ：

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

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

这篇关于麻烦将DatePicker添加到模态 - 在背景幕中显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！