如何在我的情況下建立模式

我爲我的應用程序使用引導modal。我在我的modal內有一堆元素。如何在我的情況下建立模式

但是，modal中的我的一個元素被設置爲absolute的位置，元素大於模態。我想在modal之上顯示該元素，而不是在modal之內切斷。我試過z-index但它不起作用。任何建議？非常感謝！

HTML模式

<div class="modal" tabindex="-1" role="dialog"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       Test 
      </div> 
      <div class="modal-body"> 
       //....contents.. 
       <div class="option"> lots of stuff...</div> 
      </div> 
     </div> 
    </div> 
</div>

CSS

.option{ 
    position: absolute; 
    max-width: 600px; 
}

這表明像

-------------- 
|    | 
|  -------| 
|  |option | 
|  -------| 
|

，但我想

-------------- 
|    | 
|  -------------- 
|  | option  | 
|  -------------- 
|    |

來源

2014-06-26 FlyingCat

默認情況下，模式具有「溢出：隱藏」。該屬性導致大的內部元素被切斷，而不是延伸到父元素的邊界之外。您可以重寫引導程序的樣式並使用「overflow：visible」，但這可能會對樣式產生其他負面影響。

來源

2014-06-26 15:58:07 dzny

我試圖改變溢出到可見但仍然沒有運氣。 +1 – FlyingCat

我要引導文檔中的示例。 http://getbootstrap.com/javascript/#modals 檢查模態後，我發現.modal類有「overflow：hidden」以及「overflow-x：hidden」和「overflow-y：汽車」。根據你的圖表，元素沿着overflow-x被切斷。請嘗試「overflow-x：visible」，如果它仍然不起作用，甚至會聲明「！important」。 – dzny

CSS：

.option{ 
    position: absolute; 
    max-width: 600px; 
}

它會工作，請檢查一下。

來源

2014-06-26 16:23:13

這是一個錯字，但感謝您指出+1 – FlyingCat

如果它的工作適合您，請勾選答案，以便其他人也可以使用它。 @FlyingCat –

如何在我的情況下建立模式

回答

相關問題