Question

我是该领域的新手，所以我会向你解释我想要实现的目标。在我的网页中，我希望当按下按钮时，弹出卡会显示我必须填写一些信息的位置。我在我当前的项目中使用bootstrap。所以到目前为止我发现的是使用模态。因此，当卡弹出时，有一些字段要填充（简单字符串）和日期可供选择。通过到目前为止的代码，我有：

ClassB mB = Mockito.mock(ClassB.class);
classA.setClassB(mB);

此时的第一个问题是我想修改模态的宽度（太大）。之后我不想要一个字符串作为日期而是一个日期选择器，我再次通过bootstrap找到了这段代码：

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-lg btn-warning addButton" data-toggle="modal" data-target="#myModal">New Employee</button>
 <!-- Modal -->
 <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog modal-sm">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">New FRISS employee</h4>
                </div>
                <div class="modal-body">

                    <input type="text" class="form-control insertInfo" placeholder="Name" />
                    <input type="text" class="form-control insertInfo" placeholder="Surname" />
                    <input type="text" class="form-control insertInfo" placeholder="Date of birth" />
                    <input type="text" class="form-control insertInfo" placeholder="Role" />
                    <input type="text" class="form-control insertInfo" placeholder="Email address" />



                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Done</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>

不幸的是，如果我使用它，模态中的所有内容都会混合而不再有订单，我也不会设法保持一切清洁和有序。你能帮我么？提前致谢

Answer 1

要么你没有添加datepicker css cdn链接，或者我认为你正在复制并粘贴整个datepicker代码来代替出生日期输入。

您不需要使用容器div复制整个代码，只需复制

中的代码

<div class='input-group date' id='datetimepicker1'>

还要确保在head标签中添加了datetimepicker css和js文件链接。

以下是使用您的代码的示例。请检查顶部的链接和脚本标记，并按完全相同的顺序将它们放入代码中。

http://codepen.io/Nasir_T/pen/ALNkaK

还要自定义模态div的宽度。只需在自定义css文件或此页面中添加默认引导程序.modal-content {，并添加width属性以对其进行自定义。

希望这有帮助。

[编辑]

在评论中的间距请求中：您需要做的是选择每个控件的整个容器，并仅在其顶部和底部应用边距。在这种情况下，您已经在输入中添加了insertInfo类，因此只需在css文件中添加以下类。

.insertInfo {
  margin: 10px 0;
}

同样在模态代码中的datepicker div中添加此类，因为它与输入分开，我们需要应用于整个datetimepicker行而不仅仅是其中的输入

<div class='input-group date insertInfo' id='datetimepicker1'>

我还更新了codepen链接，以便您可以检查它在那里工作。快乐的编码：）

Answer 2

只需将id =“datetimepicker1”添加到输入字段

即可

并在页面末尾添加此java脚本代码

<script>
$(document).ready(function () { 
    $('#datetimepicker1').datetimepicker(
    { 
            autoclose: true,
            //startDate : today,
            //endDate:today,
            format: "mm-dd-yyyy",
            minView:2
     })
        .on('click', function (e) {  
             setTimeout(function () {
                 $('#datetimepicker1').focus();
             }, 10);
        });           
})
</script>

引导程序中模态的动态大小

2 个答案: