Auf DropDown - /HTML-Select-Show Modal PopUp
Ich habe den folgenden code/fiddle, dass wenn der button geklickt wird ein dropdown angezeigt wird & wenn ein Benutzer wählt aus einer der Optionen Bootstrap-modal-Fenster angezeigt wird. Als nun der code besteht aus html-tags... " - button, ul und li. Wenn es sein muss innerhalb von html-tags wählen Sie & option, so dass der iPhone built-in Blättern ausgelöst wird/erscheint.
Irgendwelche Vorschläge, wie Sie den code in der Geige angepasst werden kann, für diese?
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">×</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">×</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">×</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">×</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>
- Fühlen Sie sich frei, um schnappen Sie sich den code aus der Geige und trat in SO an das Modul. Ich versuchte es ein paar mal.
- Sie sind ok mit einer JavaScript-basierte Lösung? Ein bisschen testen, deutet darauf hin, dass die nicht-JS-Ansatz hinzufügen
data-toggle
unddata-target
Attributeoption
- tags innerhalb einesselect
element funktioniert gut in, sagen wir, Firefox und IE, aber nicht in Webkit (Chrome/iPhone Safari). Ich denke, es könnte gelöst werden mit zusätzlichen JavaScript. - Danke, aber ich brauche, um zu zeigen, auf einem mobilen Gerät eine Liste von 300 restaurants und info über die jeweils alle auf einer Seite, nicht scrollen Sie nach unten zu viel.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Können Sie ganz einfach erreichen dies durch die Verwendung von JQuery und natürlich machen einige änderungen an Ihrem markup:
HTML (entfernen Sie die Dropdownliste, und verwenden Sie eine bootstrap-select-box)
Hinweis: Sie müssen das Attribut hinzufügen
value
zu den Optionen, und weisen Sie die modal-id ' s es. Auch geben Sie eine id zurselect
so können wir es als Ziel mit JQuery.Nun zum spaßigen Teil - JQuery
Wie Sie sehen können, auf den Wechsel der Optionen die entsprechenden
value
gelesen und die entsprechenden modal angezeigt werden können.Aktualisiert Ihre Geige