Question

我有以下代码/小提琴，当点击按钮时会显示一个下拉列表＆amp;当用户从其中一个选项中选择Bootstrap的模态窗口时，会出现。截至目前，代码由html标签...按钮，ul和li组成。虽然它需要在html标签内选择＆amp;选项，因此触发/显示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

在DropDown / HTML上选择Show Modal PopUp

1 个答案: