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">&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>

Fiddle

  • 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 und data-target Attribute option - tags innerhalb eines select 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.
InformationsquelleAutor chaser7016 | 2016-03-03
Schreibe einen Kommentar