Home / Questions / 47710
Accepted
bypabloc_
Asked: 2020-02-04 19:45:56 +0800 CST 2020-02-04 19:45:56 +0800 CST

为什么在另一个模态中调用模态时，我的应用程序会停止识别正在显示的模态？

  • 772

我再解释一下：

我展示了一个modal，我想在其中添加更多items内容select；该选项可以正常工作，但是当隐藏第一个modal项目时注册新项目的选项将被忽略，就好像它不是一样。selectmodal

我所说的“好像他不是”的意思是，即使他也scroll消失了。

这是我的表单代码：

  $(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"> 
    	<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>

笔记：

如果您打开ModalCrear工作正常的模态，然后打开模态，modalAgregarNombre这也可以正常工作，但是当我命令它隐藏模态ModalCrear时，浏览器停止工作scroll，如果我在分辨率低的设备上，模态工作，因为它永远不会去向下将其提供给操作按钮或填写其他不受欢迎的字段。

bootstrap

1 Answers

  1. Best Answer

    似乎当您打开模式然后将其隐藏时，Bootstrap 本身会删除导航栏。要更正它，请为其添加样式style="overflow-y: scroll;"，div ModalCrear使其如下所示：

    <div id="ModalCrear" class="modal fade" role="dialog" style="overflow-y: scroll;">

    示范：

    $(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>

    • 18