0

Tengo un proyecto web de asp.Net en el cual abro un modal que contiene un mapa de Google con unas coordenadas que le mando.
Cuando abro el modal desde un <button> puedo abrirlo y cerrarlo sin problema alguno. El problema se presenta cuando quiero abrirlo desde un GridView. Para abrirlo no tengo problemas, pero al cerrarlo desaparece el modal y me queda la ventana sombreada como en esta imagen:

Modal cerrado

Cuando hago click en el botón "ver mas" se abre el modal y muestra el mapa sin problemas, pero cuando lo cierro se ve así.

Acá está el código del GEO1001.aspx:

<%@ Page Title="Modal Mapa" Language="C#" MasterPageFile="~/SiteMaster.Master" AutoEventWireup="true"
MaintainScrollPositionOnPostback="true" CodeFile="GEO1001.aspx.cs" Inherits="GEO1001" ClientIDMode="Static" %>

<asp:Content ID="head" ContentPlaceHolderID="MainContentPlaceHolder1" runat="server">

    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css"/>
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

    <script type="text/javascript" src='https://maps.google.com/maps/api/js?sensor=false&libraries=places&key=AIzaSyAIYsOR9hsSznt7n7xja4r5_w_Uv2ahu8w'></script>
    <script src="js/locationpicker.jquery.js"></script>

</asp:Content>
<asp:Content ID="body" ContentPlaceHolderID="MainContent" runat="Server">
    <style type="text/css">
        .rbWidth label {
            margin-right: 10px;
            padding: 2px 0px 0px 10px;
            font-weight: normal;
            font-size: 13px;
            font-family: Verdana;
        }
    </style>
    <br /><br />
    <span class="q_title">Consulta de Geo Posiciones</span>
    <br />
    <span style="font-family:Verdana; font-size:8pt; color:red; font-weight:bold">versión 2.0</span>
    <br />

    <button type="button" data-toggle="modal" data-target="#ModalMap" class="btn btn-default">
        <span class="glyphicon glyphicon-map-marker"></span>
        <span id="ubicacion">Abrir Mapa</span>
    </button>
    <br />
    <br />
    <br />

    <style>
        .pac-container{
            z-index:99999;
        }
    </style>

    <div class="modal fade" id="ModalMap" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="form-horizontal">
                        <div id="ModalMapPreview" style="width:100%; height:400px;"></div>
                        <div class="clearfix">&nbsp;</div>

                        <script>
                            $('#ModalMapPreview').locationpicker({
                                radius: 0,
                                location: {
                                    latitude: 0,
                                    longitude: 0
                                }
                            });


                            $('#ModalMap').on('shown.bs.modal', function () {
                                $('#ModalMapPreview').locationpicker('autosize');
                            });
                        </script>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-info" data-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>

        <script type='text/javascript'>
            function openModal() {
                $('[id*=ModalMap]').modal('show');
            }
        </script>
    </div>

    <asp:Label ID="Label2" runat="server" Text="Desde Fecha"></asp:Label>
    <asp:TextBox ID="txtDesdeFecha" runat="server" CssClass="auto-style12"></asp:TextBox>
    <asp:Label ID="Label3" runat="server" Text="Hasta Fecha"></asp:Label>
    <asp:TextBox ID="txtHastaFecha" runat="server" CssClass="auto-style12"></asp:TextBox>
    <br />
    <asp:Button ID="btnBusqueda" Text="Busca Fechas" OnClick="btnBusqueda_Click" runat="server" CssClass="butt" />
    <br />
    <br />

    <div id="divGrilla">
        <asp:GridView ID="GridView1" runat="server" CssClass="table table-striped table-hover"             DataKeyNames="gpDateTime" AutoGenerateColumns="false" GridLines="None" ll>
            <Columns>
                <asp:TemplateField HeaderText="Usuario">
                    <ItemTemplate>
                        <asp:Label ID="Usuario" runat="server" Text='<%# Eval("idUser") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Fecha">
                    <ItemTemplate>
                        <asp:Label ID="Fecha" runat="server" Text='<%# Eval("gpDateTime") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Latitud">
                    <ItemTemplate>
                        <asp:Label ID="Latitud" runat="server" Text='<%# Eval("gpLatitud") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Longitud">
                    <ItemTemplate>
                        <asp:Label ID="Longitud" runat="server" Text='<%# Eval("gpLongitud") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Precision">
                    <ItemTemplate>
                        <asp:Label ID="Precision" runat="server" Text='<%# Eval("gpPrecision") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="">
                    <ItemTemplate>
                        <asp:LinkButton ID="lnkBtnEdit" runat="server" Text="Ver mas" CssClass="btn btn-info btn-xs" OnClick="Display"></asp:LinkButton>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </div>
</asp:Content>

Aquí el código del GEO1001.aspx.cs:

using System;
using System.Data;
using System.Web.UI.WebControls;

public partial class GEO1001 : System.Web.UI.Page
{
    public string[] Str_Param = new string[60];
    public object[] Obj_Param = new object[60];
    public int Cant_Param;
    public string strDB;
    public DataSet dsDB;
    public cmDB cmd;
    public cmDB_root cmd_root;
    public string strdb;
    public int estado = 0;

    public string Filter;
    public string Nivel;

    string usrConectado;

    indise_GlobalPosition Posiciones = new indise_GlobalPosition();

    int idEmpresa = 34;

    protected void Page_Load(object sender, EventArgs e)
    {
        usrConectado = Convert.ToString(Session["upUser"]);
    }

    protected void btnBusqueda_Click(object sender, EventArgs e)
    {
        DataTable dt = Posiciones.GlobalPositionPorFecha(Convert.ToDateTime(txtDesdeFecha.Text), Convert.ToDateTime(txtHastaFecha.Text));
        if (dt != null)
        {
            GridView1.DataSource = dt;
            GridView1.DataBind();
        }
    }

    #region Modal Mapa
    protected void Display(object sender, EventArgs e)
    {
        int rowIndex = Convert.ToInt32(((sender as LinkButton).NamingContainer as GridViewRow).RowIndex);
        GridViewRow row = GridView1.Rows[rowIndex];

        //Aquí voy a completar los datos de latitud y longitud para poder ubicar el punto del mapa

        ClientScript.RegisterStartupScript(this.GetType(), "Pop", "openModal();", true);
    }
    #endregion
}

Con este código, si apreto el boton "Abrir Mapa" puedo abrir y cerrar el modal sin problemas, pero desde los botones "Ver mas" puedo abrirlo, pero al cerrarlo tengo este problema.
¿Cómo puedo solucionarlo?

1 respuesta 1

2

Lo que hice finalmente fue lo siguiente:

En el modal-footer cambié el <button> por un <asp:button> con el atributo OnClick="CierraModal":

<asp:Button ID="btnCierraMapa" runat="server" Text="Cerrar" CssClass="btn btn-info" OnClick="CierraModal" />

Este método "CierraModal" contiene lo siguiente (está en el code behind):

protected void CierraModal(object sender, EventArgs e)
{
    ClientScript.RegisterStartupScript(this.GetType(), "Pop", "closeModal();", true);
}

Dentro del modal también definí la function "closeModal()" justo debajo de la function "openModal()" de la siguiente manera:

function closeModal() {
    $('[id*=ModalMap]').modal('hide');
}

De esta forma, cuando aprieto el botón para cerrar el modal, llama a la función closeModal() que esta oculta el modal.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.