|
|
@@ -7,8 +7,9 @@
|
|
|
</style>
|
|
|
<link rel="stylesheet" href="../tmp/bootstrap.min.css">
|
|
|
<script src="../tmp/jquery.slim.min.js"></script>
|
|
|
- <script src="../tmp/vue.min.js"></script>
|
|
|
+ <script src="../tmp/bootstrap.min.js"></script>
|
|
|
<script src="../tmp/pages.js"></script>
|
|
|
+ <script src="../tmp/vue.min.js"></script>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="container">
|
|
|
@@ -82,11 +83,40 @@
|
|
|
<button class="btn btn-primary btn-block" v-on:click="updatedBook()" v-else>修改</button>
|
|
|
</div>
|
|
|
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+<!-- Button trigger modal -->
|
|
|
+<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
|
|
|
+ 居中显示
|
|
|
+</button>
|
|
|
+
|
|
|
+<!-- Modal -->
|
|
|
+<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
|
|
|
+ <div class="modal-dialog modal-dialog-centered" role="document">
|
|
|
+ <div class="modal-content">
|
|
|
+ <div class="modal-header">
|
|
|
+ <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
|
|
|
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
|
+ <span aria-hidden="true">×</span>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <div class="modal-body">
|
|
|
+ ...
|
|
|
+ </div>
|
|
|
+ <div class="modal-footer">
|
|
|
+ <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
|
|
+ <button type="button" class="btn btn-primary" onclick="test()">Save changes</button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
<script>
|
|
|
+ function test() {
|
|
|
+ $('#exampleModalCenter').modal('hide')
|
|
|
+ }
|
|
|
const vm = new Vue({
|
|
|
el: "#app",
|
|
|
// 计算函数 动态变化的数据
|
