none
Como cerrar un modal RRS feed

  • Pregunta

  • Trabajo con ASP.NET MVC 5

    Tengo una vista parcial la cual la llamo como un popup, lo que trato de hacer es cerrarla solo al popup no a toda la pagina.

    Llamo al popup de la siguiente manera: en la cual se ha creado un botón que es una x y al hacer click deseo cerrarla

    <div id="myModal" class="modal fade in">
            <div class="modal-content" >
                <div class="modal-header" style="background-color: #337ab7;border-color:#2e6da4;color:#fff;">
                    <button type="button" class="close" data-dissmiss="modal">&times;</button>
                    <h5 class="modal-title" >Proveedor</h5>
                </div>
                <div class="modal-body">
                    <div id="resultado"></div>
                </div>
            </div>
    </div>

    La otra forma que deseo se cierre la ventana modal es al hacer click fuera del modal.


    Pedro Ávila
    "El hombre sabio querrá estar siempre con quien sea mejor que él."
    Lima - Perú

    sábado, 18 de febrero de 2017 20:11

Respuestas

  • Hola Pedro Ávila,

    Lo que pasa es que tienes el atributo 'data-dissmiss' mal escrito. Tendría que ser :

    data-dismiss="modal"

    El autocompletado de VS muestra el atributo incorrecto, solo tienes que corregirlo.

    [-] ... La otra forma que deseo se cierre la ventana modal es al hacer click fuera del modal.

    Esa funcionalidad ya está implementada en el modal de Bootstrap.

    Saludos.


    JC NaupaCrispín
    Lima - Perú

    La magia no existe, la programación SI

    • Marcado como respuesta Pedro Ávila domingo, 19 de febrero de 2017 0:04
    sábado, 18 de febrero de 2017 20:38

Todas las respuestas

  • Hola Pedro Ávila,

    Lo que pasa es que tienes el atributo 'data-dissmiss' mal escrito. Tendría que ser :

    data-dismiss="modal"

    El autocompletado de VS muestra el atributo incorrecto, solo tienes que corregirlo.

    [-] ... La otra forma que deseo se cierre la ventana modal es al hacer click fuera del modal.

    Esa funcionalidad ya está implementada en el modal de Bootstrap.

    Saludos.


    JC NaupaCrispín
    Lima - Perú

    La magia no existe, la programación SI

    • Marcado como respuesta Pedro Ávila domingo, 19 de febrero de 2017 0:04
    sábado, 18 de febrero de 2017 20:38
  • @Joel

    Entonces el intelisense del VS se equivoca, primera vez que me pasa, tengo que revisar si estoy trabajando con un modal bootstrap por que no tengo esa funcionalidad.


    Pedro Ávila
    "El hombre sabio querrá estar siempre con quien sea mejor que él."
    Lima - Perú

    domingo, 19 de febrero de 2017 0:07
  • Hola Pedro Ávila,

    Exacto, la primera vez que implementé una ventana modal (sin tener conocimientos de Bootstrap) también me pasó ese problema, ya que el 'IntelliSense' me autocompletó con esa propiedad (quien iva a dudar que te lo muestre incorrectamente). y tuve que leer la documentación hasta que me percaté de ello.

    Saludos.


    JC NaupaCrispín
    Lima - Perú

    La magia no existe, la programación SI

    domingo, 19 de febrero de 2017 0:11
  • @Joel 

    Wow... gracias por el tiempo, pero dudo que este usando el bootstrap parece que se colo un css que implemente por que las cajas de texto salen como una línea y no como una caja de texto, por otro lado te pregunto algo, en la vista parcial también tengo que hacer referencia a jquery por que me sale este error.

    Partial View

    @model Demo.ServiciosDominio.Dtos.ProveedorDto
    
    @using (Html.BeginForm()) 
    {
        @Html.AntiForgeryToken()
        
        <div class="form-horizontal">
            @*<h4>Proveedor</h4>
            <hr />*@
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            <div class="form-group">
                @Html.LabelFor(model => model.RazonSocial, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.RazonSocial, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.RazonSocial, "", new { @class = "text-danger" })
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.NumeroDocumento, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.NumeroDocumento, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.NumeroDocumento, "", new { @class = "text-danger" })
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.Direccion, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Direccion, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Direccion, "", new { @class = "text-danger" })
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.Telefono, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Telefono, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Telefono, "", new { @class = "text-danger" })
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
                </div>
            </div>
    
            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Guardar" class="btn btn-default" />
                    <input type="button" value="Cerrar" class="btn btn-default" />
                </div>
            </div>
        </div>
    }
    
    <div>
        @Html.ActionLink("Back to List", "Index")
    </div>


    Pedro Ávila
    "El hombre sabio querrá estar siempre con quien sea mejor que él."
    Lima - Perú


    • Editado Pedro Ávila domingo, 19 de febrero de 2017 0:30 ...
    domingo, 19 de febrero de 2017 0:23
  • Voy abrir otro hilo

     

    Pedro Ávila
    "El hombre sabio querrá estar siempre con quien sea mejor que él."
    Lima - Perú

    domingo, 19 de febrero de 2017 0:52
  • Al parecer estas utilizando el siguiente framework css materializecss, te recominedo veas la documentación un poco para ver si se resuelve tu problema.

    Saludos desde México :)
    lunes, 20 de febrero de 2017 15:57
  • Jesús Espinoza

    Gracias por la recomendación, ya  lo solucione.


    Pedro Ávila
    "El hombre sabio querrá estar siempre con quien sea mejor que él."
    Lima - Perú

    lunes, 20 de febrero de 2017 16:12