在下拉/ HTML選擇顯示模式彈出

我有下面的代碼/小提琴當單擊按鈕時，當用戶從出現引導的模態窗口中的一個選項選擇下拉顯示&。截至目前，代碼由html標籤...按鈕，ul和li組成。雖然它需要在html標籤內選擇&選項，所以內置滾動的iPhone被觸發/出現。在下拉/ HTML選擇顯示模式彈出

有關如何調整小提琴中的代碼可以調整的建議？

HTML（：

CSS

button { 
    border: 1px solid #34740e; 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border-radius: 3px; 
    font-size: 12px; 
    font-family: arial, helvetica, sans-serif; 
    padding: 10px 10px 10px 10px; 
    text-decoration: none; 
    display: inline-block; 
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3); 
    font-weight: bold; 
    color: #FFFFFF; 
    text-decoration: none; 
    display: inline-block; 
    color: #FFFFFF; 
    padding: 8px 68px; 
    border-radius: 2px; 
    box-shadow: none; 
    font-weight: 700; 
    float: right; 
    text-transform: uppercase; 
    border: none; 
    font-family: arial, helvetica, sans-serif; 
    font-size: 17px; 
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3); 
    font-weight: bold; 
    margin-top: 30px; 
} 

button.dropdown-toggle { 
    float: none; 
    background: none; 
    color: #222; 
    text-shadow: none; 
    text-transform: capitalize; 
    padding: 5px 10px; 
} 

button.small { 
    padding: 10px 48px; 
    float: left; 
    box-shadow: none; 
    margin-top: 10px; 
}

HTML

<div class="dropdown"> 
    <button type="button" class="dropdown-toggle" data-toggle="dropdown">FIND: Restaurant Nearby<span class="caret"></span></button> 
    <ul class="dropdown-menu" role="menu"> 
    <li><a href="#consumergoods" data-toggle="modal">AppleBees</a></li> 
    <li><a href="#consumergoods2" data-toggle="modal">McDonalds</a></li> 
    <li><a href="#consumergoods3" data-toggle="modal">Wendys</a></li> 
    <li><a href="#consumergoods4" data-toggle="modal">Taco Bell</a></li> 
    </ul> 
</div> 
<div class="modal fade" id="consumergoods" data-target="#consumergoods"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header orange"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span> 

     </button> 
     <h4 class="modal-title"><strong></strong>AppleBees</h4> 
     <p>Description Here: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 

     </div> 
    </div> 
    </div> 
</div> 
<div class="modal fade" id="consumergoods2" data-target="#consumergoods2"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header orange"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span> 

     </button> 
     <h4 class="modal-title"><strong></strong>McDonalds</h4> 
     <p>Description Here: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
     </div> 
    </div> 
    </div> 
</div> 
<div class="modal fade" id="consumergoods3" data-target="#consumergoods3"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header orange"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span> 

     </button> 
     <h4 class="modal-title"><strong></strong>Wendys</h4> 
     <p>Description Here: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 

     </div> 
    </div> 
    </div> 
</div> 
<div class="modal fade" id="consumergoods4" data-target="#consumergoods4"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header orange"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span> 

     </button> 
     <h4 class="modal-title"><strong></strong>Taco Bell</h4> 
     <p>Description Here: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 

     </div> 
    </div> 
    </div> 
</div>

來源

2016-03-03 chaser7016

隨意從小提琴抓取代碼並進入SO的模塊。我試了幾次。 – chaser7016

你對基於JavaScript的解決方案還好嗎？測試的一個位表明，添加'數據toggle'和'的非JS方法數據target'屬性'option'標籤了'select'元素中，比方說，Firefox和IE瀏覽器工作正常，但不是在的Webkit （Chrome/iPhone Safari）。我認爲這可以通過額外的JavaScript來解決。 –

謝謝，但我需要在移動設備上顯示的300家餐館關於每個都在一個頁面上不向下滾動太多的列表和信息。 – chaser7016

您可以輕鬆地通過使用jQuery和ofcourse作出一些改變，以您的標記實現這一目標去除下拉列表，然後使用一個引導選擇框）

<select id="selectbox"> 
    <option value="#consumergoods">AppleBees</option> 
    <option value="#consumergoods2">McDonalds</option> 
    <option value="#consumergoods3">Wendys</option> 
    <option value="#consumergoods4">Taco Bell</option> 
</select> 

<!-- Modal 1 --> 
<!-- Modal 2 --> 
<!-- Modal 3 --> 
<!-- Modal 4 -->

注意：您需要的屬性value添加到選擇和分配模式的ID吧。也給select一個ID，所以我們可以使用JQuery來定位它。

現在最有趣的部分 - JQuery的

$("#selectbox").change(function() { 
    if ($(this).val() == "#consumergoods") { 
     $('#consumergoods').modal('show'); 
     } 
    if ($(this).val() == "#consumergoods2") { 
     $('#consumergoods2').modal('show'); 
     } 
    if ($(this).val() == "#consumergoods3") { 
     $('#consumergoods3').modal('show'); 
     } 
    if ($(this).val() == "#consumergoods4") { 
     $('#consumergoods4').modal('show'); 
     } 
});

正如你可以看到，在選項中更改相應value被讀取，可以顯示相應的模式。

Updated your Fiddle

來源

2016-03-03 17:10:48

正是我需要的，謝謝！奇怪的是，儘管我無法讓它在本地運行......在過去的45分鐘內，將繼續嘗試！ – chaser7016

想通了，爲什麼模態窗口沒有出現/彈出......你有結束標記之前把你的JS腳本在底部。再次感謝！ – chaser7016

很高興工作。 –

在下拉/ HTML選擇顯示模式彈出

回答

相關問題