project/modal.html at master · cuiyanan89/project · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>模态对话框示例</title>
<link href="http://www.see-source.com/bootstrap/css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="http://www.see-source.com/bootstrap/js/jquery.js"></script>
<script type="text/javascript" src="http://www.see-source.com/bootstrap/js/bootstrap-modal.js"></script>
</head>

<body>
  <div class="modal hide" id="myModal">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"  >&times;</button>
        <h3>对话框标题</h3>
      </div>
      <div class="modal-body">
        <p>你好...</p>
      </div>
      <div class="modal-footer">
        <a href="#"  data-dismiss="modal" class="btn">关闭</a>
        <a href="#" class="btn btn-primary">保存</a>
      </div>
  </div>

  <button type="button" class="btn" data-toggle="modal" data-target="#myModal" >打开对话框</button>
<a href="#myModal">a is ok?</a>
</body>
</html>