从头开始创建CSS模态框”

1. HTML结构

<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Modal Body</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

2. CSS样式

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-dialog {
  position: relative;
  margin: 10% auto;
  padding: 0;
}

.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.modal-header,
.modal-footer {
  padding: 15px;
  border-bottom: 1px solid #e5e5e5;
}

.modal-header h4 {
  margin: 0;
}

.modal-body {
  padding: 15px;
}

.close {
  position: absolute;
  right: 15px;
  top: 0;
  color: #000;
  font-size: 30px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

3. JavaScript代码

$(document).ready(function(){
  $("#myBtn").click(function(){
    $(".modal").fadeIn();
  });
  $(".close, .modal").click(function(){
    $(".modal").fadeOut();
  });
});

其中，#myBtn代表打开模态框的按钮，需要根据实际情况修改。