在 DropDown/HTML 上选择 Show Modal PopUp

Question

我有以下代码/小提琴，当单击按钮时，会显示一个下拉菜单，并且当用户从 Bootstrap 的模式窗口中的一个选项中进行选择时。截至目前，代码由 html 标签组成...按钮、ul 和 li。虽然它需要在 html 标签中选择 & 选项，所以 iPhone 的内置滚动被触发/出现。

关于如何调整小提琴中的代码有什么建议吗？

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

Answer 1

您可以通过使用 JQuery 轻松实现这一点，当然还可以对您的标记进行一些更改：

HTML（删除下拉菜单并使用引导选择框）

<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