響應式設計問題 - 模態彈出式

我開發了一個自定義模式彈出窗口，用作我項目中的通用組件。不同的內容/ html會從模式內部傳遞到模式中。響應式設計問題 - 模態彈出式

普拉克 - http://plnkr.co/edit/aApQZhgMZJkMAjLtjF5P?p=preview

HTML：

<body> 
    <div> 
     <button class="one">One</button> 
     <button class="two">Two</button> 
    </div> 
    <div class="modal"> 
     <div>Content specific to button here</div> 
    </div> 
    <div class="backdrop"></div> 
    </body>

CSS

button{width:50px; height:20px; margin-right:10px;} 
.modal{position:absolute; top:50px; left:50px; height:100px;background:#ededed; display:none;z-index:10; } 
.backdrop{position: fixed; top: 0; left: 0; right: 0; bottom: 0;background: #000; opacity: .5; 
    display:none; z-index:9;}

$(document).ready(function(){ 
    $(".one").on("click",function(){ 
    $(".modal, .backdrop").show(); 
    $(".modal div").width(50).html("Content 1 here") 
    }) 

    $(".two").on("click",function(){ 
    $(".modal, .backdrop").show(); 
    $(".modal div").width(300).html("Content 2 here") 
    }) 

    $(".backdrop").on("click",function(){ 
    $(".modal, .backdrop").hide(); 
    }) 
}

）

如上圖所示，當點擊按鈕1時，彈出窗口內的內容就會減少，因此彈出窗口的大小非常小。但是當從另一個按鈕調用彈出窗口時，那裏有很多內容。現在，我必須在主要所有平臺上 - 移動（iphone/nexus），平板電腦（nexus/ipad/ipadmini）和桌面瀏覽器進行此項工作。

問題，我面對：

1）當模式從一鍵開啓，模態的寬度將是非常低的，因爲沒有太多的內容，只是一個小名單與的幾行文字。

2）從第二按鈕模態佔據了手機整個屏幕，因此我想保持模態的寬度爲100％。但是如果我這樣做了，它在平板電腦和桌面上也佔據了全屏，這是不需要的，它應該只在標籤和桌面上佔用50％。而且我還需要確保模式保持與第1點一樣小或者從第1個點開啓時。

3）的模式是直接附加到body標籤

4）由於模式是通用的部件，我只是想保持它的造型一樣，不論從那裏被調用。爲了照顧不同的實例，模態內的div可以用於變化的寬度。

因此，考慮到所有4點，我不能讓它在所有平臺上工作，我能得到它的臺式機/平板電腦完成的，而不是手機，因爲它需要100％的畫面出現。

來源

2014-10-30 whyAto8

你需要考慮在CSS媒體查詢...

喜歡的東西：

.modal { width:50%; } 

@media only screen and (max-width: 767px) { .modal { width:100%; }}

這將使.modal類50％，在所有設備上，但是在手機上的100％。

來源

2014-10-30 04:35:33 Duetschpire

嘿，我有點意識到，對於我的要求，我只好用js，以確定瀏覽器窗口，然後做相應的事情。媒體查詢本身就有幫助，但無論如何，感謝您的意見。 – whyAto8 2014-11-10 04:17:48

響應式設計問題 - 模態彈出式

回答

相關問題