Question

我有一个bootstrap模态和形式。 form具有select标签，其中包含从数据库生成的选项这是一长串的名字。问题是它是从模态体容器中脱离出来的。

HTML：

<div id="extrusion-modal" class="modal fade" role="dialog">
      <div class="modal-dialog  modal-lg" role="dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <form action="Action.cfm" method="POST" class="form-group">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title"></h4>
                    <p>Machine ID = <span class="machine-id"></span></p>
                </div>

                <div class="modal-body" style="overflow: visible;">
                    <div class="form-group">
                        <cfoutput>
                            <input type="hidden" name="actionID" value="">
                            <input type="hidden" name="tMID" value="">
                            <select class="form-control input-lg">
                                <optgroup>
                                    <cfloop query="operator">
                                        <option value="#EmployeeID#" <cfif session.tOperator IS EmployeeID>selected</cfif>>#ename#</option>
                                    </cfloop>
                                </optgroup>
                            </select>
                        </cfoutput>
                    </div>
                </div><!--- /.modal-body --->
                <div class="modal-footer">
                    <button type="submit" class="btn btn-default" data-dismiss="modal">Change Screen</button>
                </div>
            </form>
        </div>
      </div>
    </div><!--- .modal --->

JavaScript的：

$('##extrusion-modal').on('show.bs.modal', function (event) {
      var button = $(event.relatedTarget) // Button that triggered the modal
      var actionName = button.data('actionid'); // Extract info from data-* attributes
      var machineID = button.data('tmid'); // Extract info from data-* attributes
      var modal = $(this)
      modal.find('input[name="actionID"]').val(actionName);
      modal.find('input[name="tMID"]').val(machineID);
    })

页面上的结果：

使用下拉作为@SGS Venkatesh在其中一个答案中建议

如何在模态体内显示列表？

Answer 1

您可以使用Bootstrap的下拉列表尝试此操作，并使用overflow-y设置所需的高度为ul元素：滚动或自动。

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Select Operator<span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Answer 2

也许这对你有帮助吗？

#extrusion-modal .modal-body{
    overflow: hidden
}

HTML select的选项超出了父div

2 个答案: