jquery - 在 DropDown/HTML 选择 Show Modal PopUp

Question

我有以下代码/ fiddle ，当单击按钮时会显示一个下拉列表，当用户从其中一个选项中选择时，会出现 Bootstrap 的模态窗口。到目前为止，代码由 html 标签组成……按钮、ul 和 li。虽然它需要在 html 标签内选择和选项，所以 iPhone 的内置滚动被触发/出现。

关于如何为此调整 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 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');
      }
 });

如您所见，更改选项时会读取相应的值，并显示相应的模式。

Updated your Fiddle