add modal example

9 years ago · 10ac41a0af
2 changed files with 134 additions and 0 deletions
--- a/examples/modal/index.html
+++ b/examples/modal/index.html
@ -0,0 +1,71 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Vue.js Modal Example</title>
    <script src="../../dist/vue.js"></script>
    <link rel="stylesheet" href="modal.css">
  </head>
  <body>
    <!-- template for the modal component -->
    <script type="x/template" id="modal-template">
      <div class="modal-mask" transition="modal">
        <div class="modal-wrapper">
          <div class="modal-container">
            <div class="modal-header">
              <slot name="header">
                default header
              </slot>
            </div>
            <div class="modal-body">
              <slot name="body">
                default body
              </slot>
            </div>
            <div class="modal-footer">
              <slot name="footer">
                default footer
                <button class="modal-default-button" @click="$emit('close')">
                  OK
                </button>
              </slot>
            </div>
          </div>
        </div>
      </div>
    </script>
    <script>
      // register modal component
      Vue.component('modal', {
        template: '#modal-template'
      })
    </script>
    <!-- app -->
    <div id="app">
      <button id="show-modal" @click="showModal = true">Show Modal</button>
      <!-- use the modal component, pass in the prop -->
      <modal v-if="showModal" @close="showModal = false">
        <!--
          you can use custom content here to overwrite
          default content
        -->
        <h3 slot="header">custom header</h3>
      </modal>
    </div>
    <script>
      // start app
      new Vue({
        el: '#app',
        data: {
          showModal: false
        }
      })
    </script>
  </body>
 </html>
--- a/examples/modal/modal.css
+++ b/examples/modal/modal.css
@ -0,0 +1,63 @@
 .modal-mask {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  display: table;
  transition: opacity .3s ease;
 }
 .modal-wrapper {
  display: table-cell;
  vertical-align: middle;
 }
 .modal-container {
  width: 300px;
  margin: 0px auto;
  padding: 20px 30px;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
  transition: all .3s ease;
  font-family: Helvetica, Arial, sans-serif;
 }
 .modal-header h3 {
  margin-top: 0;
  color: #42b983;
 }
 .modal-body {
  margin: 20px 0;
 }
 .modal-default-button {
  float: right;
 }
 /*
 * the following styles are auto-applied to elements with
 * transition="modal" when their visibility is toggled
 * by Vue.js.
 *
 * You can easily play with the modal transition by editing
 * these styles.
 */
 .modal-enter {
  opacity: 0;
 }
 .modal-leave-active {
  opacity: 0;
 }
 .modal-enter .modal-container,
 .modal-leave-active .modal-container {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
 }