Vue js模態不會在其包含的元素寬度下面調整

Question

我正在嘗試使用較大尺寸的Vue js modal example。我製作了「模態容器」類，寬度爲500px，填充30px，最大寬度爲80％。出於某種原因，包含容器類的「模態蒙版」類在設置爲100％寬度時不會調整爲低於560像素。這裏發生了什麼？

說得很簡單：我想要一個更大的模態，並且我希望它以最小寬度適合頁面。

<template id="modal-template"> 
    <transition name="modal"> 
    <div class="modal-mask"> 
     <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="hideModal"> 
       OK 
       </button> 
      </slot> 
      </div> 
     </div> 
     </div> 
    </div> 
    </transition> 
</template> 

<script> 
    export default { 
    name: 'VueModal', 
    methods: { 
     hideModal() { 
     return this.$store.commit('hideModal') 
     } 
    } 
    } 
</script> 

<style> 
    .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: 500px; 
    max-width: 80%; 
    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; 
    } 

    .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); 
    } 
</style> 

Answer 1

「表格的佈局：固定」在模式光罩類爲我工作。