jQuery实现自定义模态对话框

jQuery实现模态对话框

关键词：jQuery, data-toogle=“modal” data-target="#id"

在html中加入对话框

<!--------------------------------
- DEFAULT MODAL : ... BEGIN ...
------------------------------->
<div class="modal fade" id="modal-calendar-log">
  <div class="modal-dialog" style="max-width:1000px">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">项目变更日志</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-4">
            <div class="form-group">
              <label>日志标题</label>
              <input class="form-control" type="text" placeholder="需求/变更/入职" id="modal-project-log-header">
            </div>
          </div>
          <!-- .col -->
          <div class="col-md-4">
            <div class="form-group">
              <label>日志内容</label>
              <input class="form-control" type="text" placeholder="Default input" id="modal-project-log-body">
            </div>
          </div>
          <!-- .col -->
          <div class="col-md-4">
            <div class="form-group">
              <label>日志批注</label>
              <input class="form-control" type="text" placeholder="Default input" id="modal-project-log-footer">
            </div>
          </div>
          <!-- .col -->
        </div><!-- .row -->
      </div>
      <div class="modal-footer justify-content-between">
        <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" id="modal-project-log-btnSave">增加日志</button>
      </div>
      <div class="modal-body">
        <!-- Timelime example  -->
        <div class="row">
          <div class="col-md-12">
            <!-- The time line -->
            <div class="timeline">
            </div>
          </div>
          <!-- /.col -->
        </div>
        <!-- /.timeline -->
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
  <input type="hidden" id="modal-project-log-unique-id"/>
</div>
<!-- /.modal -->
<!--------------------------------
- DEFAULT MODAL : ... END ...
------------------------------->

在js文件中操作

$("#modal-calendar-log").modal("show");

类似事件还有：hide, toggle

关联页面button操作

<button data-toggle="modal" data-target="#modal-calendar-log"></button>

注意：target里面是有一个#来标记页面元素的