调用时不弹出模态

Question

我有一个查询模式表单，我希望在单击图像 'Enquire now' 时弹出该表单。我已经实现了代码，但是模式 window 根本没有打开。我不明白出了什么问题。我是设计部分的新手，需要一些 insights.Any 帮助将非常有帮助这是我在 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';

    });

Answer 1

试试这个代码 -

$('#enquire_widget').click(function(){
    $('#register').modal('show')
});

Answer 2

我猜你已经使用 bootstrap 作为模态，您需要在创建模态 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>

调用时不弹出模态

Modal not popping up on calling

html

css

modal-dialog