What is a promise in Javascript?

Question

lucho

Asked: 2020-03-31 02:30:20 +0800 CST 2020-03-31 02:30:20 +0800 CST 2020-03-31 02:30:20 +0800 CST

将滚动设置为引导模式窗口，而不仅仅是它的主体

772

我有一个引导模式窗口，它通常具有正文的滚动条。

如何使模态滚动出现在整个模态窗口中？因为当body增长时，添加组件时，我看不到modal的顶部

3 Answers

Voted

bypabloc_ · Answer 1 · 2020-03-31T07:01:55+08:00

css我们可以在的 main 中使用一个简单的代码来完成它，style="overflow-y: scroll;"我们div只需modal添加它，它就已经创建了一个您指定它的scroll单一代码。modal

$(document).on('click', '#Crear', function() {
  $('#ModalCrear').modal('show');
});

$(document).on('click', '#agregar_nombres', function() {
  $('#ModalAgregarNombre').modal('show');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />


<button type="button" id="Crear" class="btn btn-primary">
            <span class="fa fa-plus"></span> Agregar
        </button>

<div id="ModalCrear" class="modal fade" role="dialog" style="overflow-y: scroll;">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-tittle">Crear</h4>
      </div>
      <form class="form-horizontal" role="form" id="form-crear">
        <div class="modal-body">
          <div class="row form-group col-md-12">
            <label for="crear_codigo" class="control-label col-sm-2 col-xs-12">Código: </label>
            <div class="col-sm-4 col-xs-6">
              <input type="number" class="form-control" id="crear_codigo" name="crear_codigo">
            </div>
          </div>
          <div class="row form-group col-md-12">
            <label for="crear_nombre" class="control-label col-sm-2 col-xs-12">Nombre: </label>
            <div class="col-sm-6 col-xs-10 selectContainer">
              <select id="crear_nombre" name="crear_nombre" class="form-control" style="width: 100%;">
                                            <option value="0">Seleccione...</option>
                                            <option value="1">Clorace</option>
                                            <option value="2">Miovit</option>
        							</select>
            </div>
            <div class="col-sm-2 col-xs-2">
              <button type="button" class="btn btn-primary" id="agregar_nombres">
        								<span class="fa fa-plus"></span>
                            			<span class="hidden-xs"> Agregar Items</span> 
        							</button>
            </div>
          </div>
          <div class="row form-group col-md-12">
            <label for="crear_formas_farmaceuticas" class="control-label col-sm-2 col-xs-12">Forma Farmacéutica: </label>
            <div class="col-sm-6 col-xs-10 selectContainer">
              <select id="crear_formas_farmaceuticas" class="form-control" name="crear_formas_farmaceuticas" style="width: 100%;">
                                            <option value="0">Seleccione...</option>
                                            <option value="1">Inyección</option>
                                            <option value="2">Jarabe</option>
        							</select>
            </div>
            <div class="col-sm-1 col-xs-2">
              <button type="button" class="btn btn-primary" id="agregar_formas">
        								<span class="fa fa-plus"></span>
                            			<span class="hidden-xs"> Agregar Items</span> 
        							</button>
            </div>
          </div>
          <div class="row form-group col-md-12">
            <label for="crear_presentacion" class="control-label col-sm-2 col-xs-12">Presentación: </label>
            <div class="col-sm-3 col-xs-5">
              <input type="number" class="form-control" id="crear_presentacion" name="crear_presentacion">
            </div>
            <div class="col-sm-4 col-xs-7 selectContainer">
              <select id="crear_unidad_de_medicion_p" class="form-control" name="crear_unidad_de_medicion_p" style="width: 100%;">
                                            <option value="0">Seleccione...</option>
                                            <option value="1">(und) Unidad</option>
                                            <option value="2">(ml) Mililitro</option>
                                            <option value="2">(mg) Miligramo</option>
        							</select>
            </div>
          </div>
          <div class="row form-group col-md-12">
            <label for="crear_unidad_teorica" class="control-label col-sm-2 col-xs-12">Unidad Teórica: </label>
            <div class="col-sm-5 col-xs-5">
              <input type="number" class="form-control" id="crear_unidad_teorica" name="crear_unidad_teorica">
            </div>
            <div class="col-sm-4 col-xs-7 selectContainer">
              <select id="crear_unidad_de_medicion_u" class="form-control" name="crear_unidad_de_medicion_u" style="width: 100%;">
                                            <option value="0">Seleccione...</option>
                                            <option value="1">(und) Unidad</option>
                                            <option value="2">(ml) Mililitro</option>
                                            <option value="2">(mg) Miligramo</option>
        							</select>
            </div>
          </div>
          <div class="row form-group col-md-12">
            <label for="crear_velocidad" class="control-label col-sm-2 col-xs-12">Velocidad del Producto: </label>
            <div class="col-sm-3 col-xs-5">
              <input type="number" class="form-control" id="crear_velocidad" name="crear_velocidad">
            </div>
            <label class="col-sm-5 col-xs-7">
        							<h4>
        								<sup id="crear_unidad_de_medicion_v_u" name="crear_unidad_de_medicion_v_u">
        									
        								</sup>
        								/
        								<sub id="crear_unidad_de_medicion_v_t" name="crear_unidad_de_medicion_v_t">
        									min
        								</sub>
        							</h4>
        						</label>
          </div>
          <div class="row form-group col-md-12">
            <label class="control-label col-sm-2 col-xs-12">Tiempo Teórico: </label>
            <label class="col-sm-7 col-xs-7">
        							<h4>
        								<sub id="crear_tiempo_teorico" name="crear_tiempo_teorico">
        									
        								</sub>
        							</h4>
        						</label>
          </div>
          <div class="row form-group col-md-12">
            <label for="crear_linea_de_produccion" class="control-label col-sm-2">Linea de Producción:</label>
            <div class="col-sm-8 selectContainer">
              <select id="crear_linea_de_produccion" class="form-control" name="crear_linea_de_produccion" style="width: 100%;">
                                            <option value="0">Seleccione...</option>
                                            <option value="1">Liquidos Esteriles</option>
                                            <option value="2">Liquidos No Esteriles</option>
                                            <option value="2">Solidos</option>
        							</select>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">
        						<span class="glyphicon glyphicon-remove"></span>
                            	<span class="hidden-xs"> Cerrar</span> 
        					</button>
          <button type="button" id="Guardar" name="Guardar" class="btn btn-primary">
        						<span class="fa fa-save"></span>
                            	<span class="hidden-xs"> Guardar</span> 
        					</button>
        </div>
      </form>
    </div>
  </div>
</div>

<div id="ModalAgregarNombre" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-tittle">Agregar</h4>
      </div>
      <form class="form-horizontal" role="form" id="form-agregar">
        <div class="modal-body">
          <div class="form-group col-md-12">
            <label for="agregar_nombre" class="control-label col-sm-4">Nombre: </label>
            <div class="col-sm-8">
              <input type="text" class="form-control" id="agregar_nombre" name="agregar_nombre">
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">
        						<span class="glyphicon glyphicon-remove"></span><span class="hidden-xs"> Cerrar</span>
        					</button>
          <button type="button" id="GuardarNombre" name="GuardarNombre" class="btn btn-primary">
        						<span class="fa fa-save"></span><span class="hidden-xs"> Guardar</span>
                              
        					</button>
        </div>
      </form>
    </div>
  </div>
</div>

笔记：

在小演示屏幕上运行它并modal使用的第一个按钮打开 2nd plus，您会看到它有一个scrollfor it。

JuankGlezz · Answer 2 · 2020-03-31T08:19:29+08:00

我想你想要做的是即使它超过显示的某个高度也应用scroll，.modal-body如果scroll这是你想要做的，你只需要在你的 CSS 中添加这个规则：

.modal-body{
  height: 95px;
  width: 100%;
  overflow-y: auto;
}

这会将固定高度应用于模态的主体，因此您可以看到.modal-headerand .modal-footer。我把例子留给你。

.modal-body{
  height: 100px;
  width: 100%;
  overflow-y: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tristique et magna nec imperdiet. Mauris nec rutrum nunc. Pellentesque sit amet dui dolor. Proin vel feugiat libero. Vestibulum et neque posuere, varius odio quis, varius quam. Cras lacinia
        sapien a leo tincidunt tincidunt. Integer a nunc non nisl tempus faucibus. Aliquam at efficitur justo. Proin sapien eros, facilisis et interdum in, elementum at elit. Mauris porttitor justo sed ante ultrices tincidunt. Morbi placerat ornare nibh
        in consectetur. Pellentesque sollicitudin vulputate consectetur. Ut vehicula ex pretium lacus faucibus, non venenatis purus tincidunt. Praesent efficitur vitae ex quis aliquam. Phasellus dapibus quam sodales ipsum suscipit, facilisis accumsan
        leo efficitur. Etiam vestibulum maximus sollicitudin. Phasellus pulvinar diam non enim tempus efficitur a id tortor. Aliquam vel consectetur tortor. Praesent fringilla gravida lacus in faucibus. Vestibulum a velit volutpat, vehicula mauris at,
        scelerisque purus. 
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Kroneaux Schneider · Answer 3 · 2020-03-31T08:39:58+08:00

Kroneaux Schneider

2020-03-31T08:39:58+08:002020-03-31T08:39:58+08:00

对我有用的是style="overflow-y:auto"放置一个 div .modal（整个对话框在其中），以便滚动整个对话框：

<div class="modal fade in" tabindex="-1" role="dialog" id="DetailsDialog" style="overflow-y: auto; display: block;" aria-hidden="false">
    <div class="modal-dialog" role="document">
        ...
    </div><!-- /.modal-dialog -->
</div>

1

将滚动设置为引导模式窗口，而不仅仅是它的主体

HTML button that sends you to another page

Why do I get the error "Call to undefined function mysql_connect()"?

How to create an HTML button that works as a link?

How to separate a String in Java. How to use split()

Filter by dates in sql server

How to limit the number of decimal places in a double?

For each in JavaScript?

Position footer ALWAYS glued to the footer

Definitive Guide to Type Conversion in Java

How to properly compare Strings (and objects) in Java?