Question

我有一个查询模式形式，当我单击图像“立即查询”时，我想弹出该表格。我已经实现了代码，但是模态窗口根本没有打开。我不明白怎么了。我是设计新手，需要一些见识。任何帮助都会对您有所帮助这是我在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

我猜你是在模态中使用了引导程序，您需要在创建模式div之前关闭“ enquire_widget”。引导程序提供了“数据切换”和“数据目标”属性以打开模式

<div class="tfnwidget hidden-xs" id="enquire_widget" data-toggle="modal" data-target="#register">Open modal</div>

通话时不会弹出模态

2 个答案: