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

Question

I am a newbie in the field, so I will explain you what I am trying to achieve. In my webpage I want that when a button is pressed, a popup card shows up where I have to fill some information. I am using bootstrap in my current project. So what I found so far is the use of a modal. So when the card pops up there are some fields to fill (easy strings) and a date to choose. By going to the code so far I have:

<!-- 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>

The first problem at this point is that I would like to modify the width of the modal (which is too big). Afterwards I don't want a string as a date but a date picker and again I found through bootstrap this snippet of code:

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker1').datetimepicker();
            });
        </script>
    </div>
</div>

Unfortunately if I use it, everything in the modal gets mixed without anymore an order and I don't manage to keep everything clean and ordered. Can you please help me? Thanks in advance

Answer 1

Either you have not added in the datepicker css cdn links in or I think you are copying and pasting the whole datepicker code in place of the date of birth input.

You dont need to copy the whole code with the container div just the code from the

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

Also make sure you have added in the datetimepicker css and js file links in your head tag.

Here is as example using your code. Do check the link and script tags at the top and put them in your code in the exact same order.

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

Also to customize the width of the modal div. Just add the default bootstrap .modal-content { class in your custom css file or this page and add the width property to customize it.

Hope this helps.

[Edit]

On your spacing request in comments: What you needed to do is pick the whole container of each control and apply margin to it's top and bottom only. In this case you already had the insertInfo class added in the inputs so just add the following class in your css file.

.insertInfo {
  margin: 10px 0;
}

Also add this class in the datepicker div in the modal code as that is separate from the input and we need to apply to the whole datetimepicker row instead of just the input in it so

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

I have also updated the codepen link so you can check it working there. Happy coding :)

Answer 2

just add id="datetimepicker1" to your input field

and add this java script code at the end of the page

<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>