Question

我有一个引导程序模式，显示了单击按钮的情况。但是当我打开模态时，除以下两点外，其他所有东西都工作正常： 1）我添加的日期选择器引导程序片段不起作用。 2）页脚后有额外的白色背景空间。请帮助我哪里出错了。

这是我的default.aspx头部分中的代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
  <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="/js/JavaScript1.js"></script>
  <link rel="stylesheet" runat="server" media="screen" href="~/css/StyleSheet1.css" type="text/css" />
  <script type="text/javascript" src="/js/JavaScript1.js"></script>

这是我在default.aspx正文部分中的引导程序模式代码：

 <div id="addAnotherUserModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="lblAddAnotherUserModal" aria-hidden="true">
        <div class="modal-dialog" role="document">          
           <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h2>
                        <asp:Label ID="lblAddAnotherUser" runat="server" CssClass="modal-title">Add Another User</asp:Label>
                    </h2>
                </div>
                <div class="modal-body">
                    <div class="col-xs-12 col-md-6">
                        <asp:UpdatePanel runat="server" UpdateMode="conditional">
                            <Triggers>
                                <asp:AsyncPostBackTrigger ControlID="lnkbtnFamilyAdd" />
                            </Triggers>
                                      <ContentTemplate>
                                           <div role="form">
                                  <asp:UpdatePanel runat="server" UpdateMode="conditional">
                                      <Triggers>
                                          <asp:AsyncPostBackTrigger ControlID="lnkbtnFamilyAdd" />
                                      </Triggers>
                                      <ContentTemplate>
                                           <div class="form-group">
                                              <asp:Label ID="lblnewFirstName" runat="server" CssClass="col-xs-12" AssociatedControlID="txtnewFirstName" class="form-control" Text="First Name"></asp:Label>
                                              <asp:TextBox ID="txtnewFirstName" runat="server" CssClass="form-control"  placeholder="Enter First Name"></asp:TextBox>
                                          </div>
                                           <div class="form-group">
                                              <asp:Label ID="lblnewLastName" runat="server" CssClass="col-xs-12" AssociatedControlID="txtnewLastName" class="form-control" Text="Last Name"></asp:Label>
                                              <asp:TextBox ID="txtnewLastName" runat="server" CssClass="form-control"  placeholder="Enter Last Name"></asp:TextBox>
                                          </div>
                                          <div class="form-group">
                                              <asp:Label ID="lblnewAddress" runat="server" CssClass="col-xs-12" AssociatedControlID="txtnewAddress" class="form-control" Text="Address"></asp:Label>
                                              <asp:TextBox ID="txtnewAddress" runat="server" CssClass="form-control"  placeholder="Enter Address"></asp:TextBox>
                                          </div>
                                          <div class="form-group">
                                              <asp:Label ID="lblnewDOB" runat="server" CssClass="col-xs-12"  class="form-control" Text="Date Of Birth" Font-Bold="true"></asp:Label>
 <div class="row">
                                        <!-- Include Bootstrap Datepicker -->
                                        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css" />
                                        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker3.min.css" />
                                        <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js"></script>

                                    <div class="form-group">
                                     <div class="col-xs-12 date">
                                     <div class="input-group input-append date" id="datePicker">
                                     <input id="dpDOB" runat="server" type="text" class="form-control" name="date" />
                                       <span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
                                        </div>
                                        </div>
                                         </div>
                                      <script>
                                         $(document).ready(function() {
                                         $('#datePicker')
                                         .datepicker({
                                         format: 'mm/dd/yyyy'
                                           })
                                       .on('changeDate', function(e) {
                                       // Revalidate the date field
                                      $('#eventForm').formValidation('revalidateField', 'date');
                                        });

                                      $('#eventForm').formValidation({
                                       framework: 'bootstrap',
                                     icon: {
                                      valid: 'glyphicon glyphicon-ok',
                                      invalid: 'glyphicon glyphicon-remove',
                                      validating: 'glyphicon glyphicon-refresh'
                                                },
                                    fields: {
                                         name: {
                                         validators: {
                                         notEmpty: {
                                        message: 'The name is required'
                                         }
                                         }
                                       },
                                   date: {
                                       validators: {
                                       notEmpty: {
                                      message: 'The date is required'
                                            },
                                        date: {
                                    format: 'MM/DD/YYYY',
                                    message: 'The date is not a valid'
                                         }
                                       }
                                    }
                                  }
                               });
                              });
                        </script>
                    </div>
                </div>
                                              </div>
                                          <div class="form-group">
                                              <asp:Label ID="lblnewEmail" runat="server" CssClass="col-xs-12" AssociatedControlID="txtnewEmail" class="form-control" Text="Email"></asp:Label>
                                              <asp:TextBox ID="txtnewEmail" runat="server" CssClass="form-control" placeholder="Enter Email"></asp:TextBox>
                                          </div>
                                          <div class="form-group">
                                              <asp:Label ID="lblnewPhoneNumber" runat="server" CssClass="col-xs-12" AssociatedControlID="txtnewPhoneNumber" class="form-control" Text="Phone Number"></asp:Label>
                                              <asp:TextBox ID="txtnewPhoneNumber" runat="server" CssClass="form-control"  placeholder="Enter Primary Phone Number"></asp:TextBox>
                                          </div>
                                          <div class="form-group">
                                              <asp:Label ID="lblnewSecondaryNumber" runat="server" CssClass="col-xs-12" AssociatedControlID="txtnewSecondaryNumber" class="form-control" Text="Secondary Phone Number"></asp:Label>
                                              <asp:TextBox ID="txtnewSecondaryNumber" runat="server" CssClass="form-control"  placeholder="Enter Secondary Phone Number"></asp:TextBox>
                                          </div>
                                      </ContentTemplate>
                                  </asp:UpdatePanel>
                    <div class="modal-footer">
                    <asp:UpdatePanel ID="UpnewUser" runat="server" UpdateMode="Conditional">
                        <ContentTemplate>
                            <div class="form-group">
                            <asp:Button ID="btnModalnewClose" runat="server" CssClass="btn btn-primary" data-dismiss="modal" Text="Close" />
                            <asp:Button ID="btnAddNewUserSave" runat="server" CssClass="btn btn-primary" Text ="Save" />
                                </div>
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </div>
                         </div>
                   </div>
             </div>
                                      </ContentTemplate>
                                  </asp:UpdatePanel>
                         </div>
                    </div>

               </div>
        </div>
    </div>

在页脚之后启动模态白色背景

0 个答案: