html - 调用时不弹出模态

标签 html css modal-dialog

我有一个查询模式表单,我希望在单击图像“立即查询”时弹出该表单。我已经实现了代码,但模态窗口根本没有打开。我不明白出了什么问题。我是设计部分的新手,需要一些见解。任何帮助都会非常有帮助 这是我在 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';

    }); 

最佳答案

试试这段代码-

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

关于html - 调用时不弹出模态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58213175/

相关文章:

twitter-bootstrap - Bootstrap 模式对话框,show.bs.modal 事件相关目标未定义。如何获得点击元素?

javascript - backbone.js 三向模型同步

html - 中心对齐圆形图像

css - 在 Chrome 中按下鼠标按钮时悬停样式无法应用

javascript - 如何将 jsp 引入现有模式窗口?

javascript - yii2 中的 Bootstrap Modal 具有多个 Controller

html - 可以嵌套在 P 元素中的 HTML5 元素列表?

python - 如何单击与另一个字符串位于同一行的链接?

javascript - 更改按钮颜色和背景颜色onclick

css - 一旦你做了 onblur,如何删除按钮的默认蓝色边框?