在 DropDown/HTML Select 显示模态弹出窗口

Question

我有以下 code/fiddle，当单击按钮时会显示一个下拉菜单，当用户从选项之一中选择 Bootstrap 的模态 window 时会出现。截至目前，代码由 html 标签组成...button、ul 和 li。虽然它需要在 html 标签 select & 选项内，所以 iPhone 的内置滚动是 triggered/appears。

关于如何为此调整 fiddle 中的代码有什么建议吗？

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（删除下拉列表并使用 bootstrap select 框）

<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

在 DropDown/HTML Select 显示模态弹出窗口

On DropDown/HTML Select Show Modal PopUp

html

css

jquery

twitter-bootstrap

bootstrap-modal