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

У меня есть модальное окно начальной загрузки, в котором обычно есть прокрутка для тела.

Как я могу сделать так, чтобы модальная прокрутка отображалась для всего модального окна? так как когда тело растет, при добавлении компонентов я не вижу верх модала

3 Answers

Voted

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

С cssмы можем сделать это с помощью простого кода style="overflow-y: scroll;"в файле divmain 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с помощью первой кнопки plus, вы увидите, что scrollдля этого есть значок .

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-headerи .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?