0

我有一个查询模式表单，当单击“立即查询”图像时，我想弹出该表单。我已经实现了代码，但模式窗口根本没有打开。我不明白出了什么问题。我是设计零件的新手，需要一些见解。任何帮助都会非常有帮助这是我的代码index-morning.html，

   <div class="tfnwidget hidden-xs" id="enquire_widget">
      <!--Modal-->
        <style>
        .modal-notify .modal-header {
        border-radius: 3px 3px 0 0;
    }
    .modal-notify .modal-content {
        border-radius: 3px;
    }
        </style>
             <div class="modal fade" id="register" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-notify modal-warning" role="document">
        <!--Content-->
        <div class="modal-content">
          <!--Header-->
          <div class="modal-header text-center">
            <h4 class="modal-title white-text w-100 font-weight-bold py-2">Reach us</h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true" class="white-text">&times;</span>
            </button>
          </div>

          <!--Body-->
          <div class="modal-body">
            <div class="md-form mb-5">
              <i class="fas fa-user prefix grey-text"></i>
              <input type="text" id="form3" class="form-control validate">
              <label data-error="wrong" data-success="right" for="form3">Name</label>
            </div>

            <div class="md-form">
              <i class="fas fa-envelope prefix grey-text"></i>
              <input type="email" id="form2" class="form-control validate">
              <label data-error="wrong" data-success="right" for="form2">Email</label>
            </div>

             <div class="md-form">
              <i class="fas fa-envelope prefix grey-text"></i>
              <input type="mobile" id="form2" class="form-control validate">
              <label data-error="wrong" data-success="right" for="form2">Mobile</label>
            </div>
          </div>

          <!--Footer-->
          <div class="modal-footer justify-content-center">
            <a type="button" class="btn btn-outline-warning waves-effect">Send <i class="fas fa-paper-plane-o ml-1"></i></a>
          </div>
        </div>
        <!--/.Content-->
      </div>
    </div>

我有modal.js文件，点击图片我已经实现了这个代码，

$('#enquire_widget').click(function(){

        location.href = 'index-morning.html#register';

    });
4

2 回答 2

1

试试这个代码 -

$('#enquire_widget').click(function(){
    $('#register').modal('show')
});
于 2019-10-03T06:19:20.920 回答
0

我猜您已经将引导程序用于模态，您需要在创建模态 div 之前关闭“enquire_widget”。bootstrap 提供了“data-toggle”和“data-target”属性来打开模式

<div class="tfnwidget hidden-xs" id="enquire_widget" data-toggle="modal" data-target="#register">Open modal</div>
于 2019-10-03T06:54:23.913 回答