ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / ASP.NET [игнор отключен] [закрыт для гостей] / Закрытие всплывающего окна из GridView по клику вне его
23 сообщений из 23, страница 1 из 1
Закрытие всплывающего окна из GridView по клику вне его
    #39050954
Oleg_Oleg
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Oleg_Oleg
Гость
Здравствуйте. Подскажите как сделать чтобы в GridView, который заполняется динамически, по нажитию на ссылку в одном из столбцов показывалось всплывающее окно, а его закрытие осуществлялось по клику по области вне этого окна.
Пишу на WebForms, всплывающие окна умею отображать с помощью ModalPopUpExtender, но как их потом скрыть, не могу понять.
Буду рад любому совету, спасибо
...
Рейтинг: 0 / 0
14.09.2015, 15:46
| Ответить | Цитировать | Написать  
Закрытие всплывающего окна из GridView по клику вне его
    #39051722
Березовский
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Березовский
Участник
Проверить сейчас не могу, навскидку попробуйте такой вариант
в теге <body>
добавить
Код: html
1.
 onclick=' $("#<%= modalpopap_id.ClientID %>").hide()'



modalpopap_id- id вашего серверного попапа
...
Рейтинг: 0 / 0
15.09.2015, 12:43
| Ответить | Цитировать | Написать  
Закрытие всплывающего окна из GridView по клику вне его
    #39051770
Zoria
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Zoria
Участник
Oleg_Oleg,

http://www.webcodeexpert.com/2014/04/close-ajax-modalpopupextender-on.html
...
Рейтинг: 0 / 0
15.09.2015, 13:23
| Ответить | Цитировать | Написать  
Закрытие всплывающего окна из GridView по клику вне его
    #39051983
Oleg_Oleg
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Oleg_Oleg
Гость
Березовский, Zoria - спасибо за ответы.
Делаю как в примере, только вместо id использую BehaviorID. Это работает когда не в гриде. В гриде не работает из-за того что в каждой его строке ModalPopUpExtender имеет один и тот же BehaviorID. Сделал в _RowCreated присвоение BehaviorID = "MPE"+e.Row.RowIndex. Соответственно javascript у меня имеет вид:
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
        function pageLoad() {
            var grid = document.getElementById("<%= gv_1.ClientID %>");
            if (grid != null) {
                if (grid.rows.length > 0) {
                    for (i = 0; i < grid.rows.length - 1; i++) {
                        var mpe = $find('MPE' + i);
                        if (mpe != null) {
                            mpe.add_shown(onShown);
                        }
                    }
                }
            }
        }
        function onShown() {
            var grid = document.getElementById("<%= gv_1.ClientID %>");
            if (grid != null) {
                if (grid.rows.length > 0) {
                    for (k = 0; k < grid.rows.length - 1; k++) {
                            var background = $find('MPE'+k)._backgroundElement;
                            if (background != null) { 
                                background.onclick = function () { $find('MPE'+k).hide(); }
                            }
                        
                    }
                }
            }
        }



Но это не работает. Судя по ошибке из-за того, что $find('MPE'+k) имеет тип оbject, а у него нет метода hide().
Не знаете как это обойти можно?
...
Рейтинг: 0 / 0
15.09.2015, 15:56
| Ответить | Цитировать | Написать  
Закрытие всплывающего окна из GridView по клику вне его
    #39051997
Oleg_Oleg
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Oleg_Oleg
Гость
Интересно что если вместо $find('MPE'+k).hide() написать $find('MPE0').hide(), то в первой строке все будет работать как надо.
...
Рейтинг: 0 / 0
15.09.2015, 16:04
| Ответить | Цитировать | Написать  
Закрытие всплывающего окна из GridView по клику вне его
    #39052513
Zoria
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Zoria
Участник
Oleg_OlegИнтересно что если вместо $find('MPE'+k).hide() написать $find('MPE0').hide(), то в первой строке все будет работать как надо.
ну так там и ищите ;)
хотя конечно, у меня другой вопрос, нужен ли в каждой строке грида свой mpe, нельзя ли это как-то обойти..
...
Рейтинг: 0 / 0
16.09.2015, 10:28
| Ответить | Цитировать | Написать  
Закрытие всплывающего окна из GridView по клику вне его
    #39052566
Oleg_Oleg
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Oleg_Oleg
Гость
не получается пока найти решение. И как без mpe сделать всплывающее окно по клику на колонке в строке грида, тоже пока не нашел.
...
Рейтинг: 0 / 0
16.09.2015, 11:09
| Ответить | Цитировать | Написать  
Закрытие всплывающего окна из GridView по клику вне его
    #39052588
Березовский
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Березовский
Участник
Я бы предложил использовать один скрытый див. Делать его видимым по клику на ссылку, позиционировать рядом с положением курсора (по координатам).

В этом решении давайте попробуем просто скрыть по названию класса:
задайте ему
Код: css
1.
CssClass="test"



Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
function onShown() {
            var grid = document.getElementById("<%= gv_1.ClientID %>");
            if (grid != null) {
                if (grid.rows.length > 0) {
                    for (k = 0; k < grid.rows.length - 1; k++) {
                            var background = $find('MPE'+k)._backgroundElement;
                            if (background != null) { 
                                background.onclick = function () { $('.test').hide(); }
                            }
                        
                    }
                }
            }
        }
...
Рейтинг: 0 / 0
16.09.2015, 11:33
| Ответить | Цитировать | Написать  
Закрытие всплывающего окна из GridView по клику вне его
    #39052645
Oleg_Oleg
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Oleg_Oleg
Гость
БерезовскийЯ бы предложил использовать один скрытый див. Делать его видимым по клику на ссылку, позиционировать рядом с положением курсора (по координатам).

В этом решении давайте попробуем просто скрыть по названию класса:
задайте ему
Код: css
1.
CssClass="test"



Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
function onShown() {
            var grid = document.getElementById("<%= gv_1.ClientID %>");
            if (grid != null) {
                if (grid.rows.length > 0) {
                    for (k = 0; k < grid.rows.length - 1; k++) {
                            var background = $find('MPE'+k)._backgroundElement;
                            if (background != null) { 
                                background.onclick = function () { $('.test').hide(); }
                            }
                        
                    }
                }
            }
        }



Я правильно понял, что предлагается использовать один див вместо modalPopupExtender в каждой строке? Если да, то подскажите как на этот див навесить onShown, у меня ошибка, что у дива нету такого метода.
...
Рейтинг: 0 / 0
16.09.2015, 12:38
| Ответить | Цитировать | Написать  
Закрытие всплывающего окна из GridView по клику вне его
    #39052648
Березовский
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Березовский
Участник
Попробую набросать пример...
...
Рейтинг: 0 / 0
16.09.2015, 12:39
| Ответить | Цитировать | Написать  
Закрытие всплывающего окна из GridView по клику вне его
    #39052668
Zoria
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Zoria
Участник
Oleg_Oleg,

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
<ajax:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" CombineScripts="false"  ScriptMode="Release" />    
<script type="text/javascript">
    function pageLoad() {    
        var grid = document.getElementById("<%=gv1.ClientID %>");
        if (grid != null){            
            for (k = 0; k < grid.rows.length - 1; k++) {
                var mpe = $find("gv1_mpe1_" + k);
                if (mpe != null) mpe.add_shown(onShown); 
            }
        } 
    }
    function onShown(sender, args) {sender._backgroundElement.onclick = function () { $find(sender._id).hide(); }}
</script>
<asp:GridView runat="server" ID="gv1" OnRowDataBound="gv1_RowDataBound">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:HyperLink runat="server" ID="hlMPE" NavigateUrl="#">MPE <%# Container.DataItemIndex %></asp:HyperLink>
                <ajax:ModalPopupExtender ID="mpe1" TargetControlID="hlMPE" PopupControlID="pnlPopUp"
                    BackgroundCssClass="modalBackground" DropShadow="true" runat="server">
                </ajax:ModalPopupExtender>
                <asp:Panel ID="pnlPopUp" runat="server" Style="padding: 20px; background: white;">
                    AJAX-Panel <%# Container.DataItemIndex %></asp:Panel>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>


Код: c#
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
protected void Page_Load(object sender, EventArgs e)
    {
        gv1.DataSource = new int[] { 1, 2, 3 };
        gv1.DataBind();
    }
    protected void gv1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
            (e.Row.FindControl("mpe1") as ModalPopupExtender).TargetControlID = (e.Row.FindControl("hlMPE") as HyperLink).ID;
    }
...
Рейтинг: 0 / 0
16.09.2015, 13:01
| Ответить | Цитировать | Написать  
Закрытие всплывающего окна из GridView по клику вне его
    #39052760
Березовский
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Березовский
Участник
Oleg_Oleg, вот о чем я говорил. Двигаем и делаем видимым один див.

Код: c#
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>

 <!-- jQuery library from Google -->
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

    <!-- стили для модального дива и  фона-->
<style type="text/css">
.dialog {
  display:none;
  padding:20px;
  width: 500px;
  height: 150px;
  overflow: auto;
  margin: auto;
  position: absolute;
  
  position: fixed;
  z-index: 999;
  background-color: #FFF;
}

.bg {
 display:none;
 position:absolute;
 top:0px;
 left:0px;
 background-color:#E0E0E0;
 width:100%;
 height:200%;
 opacity:0.5;
 z-index:998;
 top: 0; left: 0; bottom: 0; right: 0;
}
</style>

    <script type="text/javascript">

        var cursor = { x: 0, y: 0 };

        $(document).ready(function () {
            $(document).mousemove(function (e) {
                cursor.x = e.pageX;
                cursor.y = e.pageY;
            });
        });

        function showdiv()
        {
            // показываема див
            $("#bg").show();
            $("#modalwindow").css({ top: cursor.y+5 , left: cursor.x+5  });
            $("#modalwindow").show();
            return false;
        }

        function hidediv() {
            // прячем див
            $("#bg").hide();
            $("#modalwindow").hide();

        }

    </script>

</head>
<body>
    <form id="form1" runat="server">

<!-- скрытый див и фон -->
  <div id="bg" class="bg" onclick="hidediv()" ></div>
     <div id="modalwindow" class="dialog">
     <input id="ОкBtn" type="button" class="ОкBtn button" onclick="hidediv()"  value="Ок" />
    </div>


       
       <% for(int i = 0; i <20; i++) %> 
       <% { Response.Write("<a onclick='showdiv()' href='#'>Сылка</a>"+ "

"); }%>
       

    <div>
    
    </div>
    </form>
</body>
</html>
...
Рейтинг: 0 / 0
16.09.2015, 13:44
| Ответить | Цитировать | Написать  
Закрытие всплывающего окна из GridView по клику вне его
    #39053521
Oleg_Oleg
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Oleg_Oleg
Гость
Березовский, спасибо, работает. Осталось только понять как данными заполнить всплывающее окно.
Zoria, пока не разобрался с вашим примером. После var mpe = $find("gv1_mpe1_" + k) в mpe всегда null, не могу пока понять почему.
...
Рейтинг: 0 / 0
17.09.2015, 09:18
| Ответить | Цитировать | Написать  
Закрытие всплывающего окна из GridView по клику вне его
    #39053547
Березовский
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Березовский
Участник
А что вам туда надо передать? ( значения какие то?)
...
Рейтинг: 0 / 0
17.09.2015, 09:46
| Ответить | Цитировать | Написать  
Закрытие всплывающего окна из GridView по клику вне его
    #39053562
Oleg_Oleg
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Oleg_Oleg
Гость
БерезовскийА что вам туда надо передать? ( значения какие то?)
Да из БД, теперь когда всплывающим окном стал div, находящийся вне грида, надо наверное как-то аяксом данные получать.
...
Рейтинг: 0 / 0
17.09.2015, 10:02
| Ответить | Цитировать | Написать  
Закрытие всплывающего окна из GridView по клику вне его
    #39053618
Березовский
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Березовский
Участник
Можно наверное поупражняться и с передачей параметра( ов) в функцию. Типа такого
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>

 <!-- jQuery library from Google -->
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

    <!-- стили для модального дива и  фона-->
<style type="text/css">
.dialog {
  display:none;
  padding:20px;
  width: 500px;
  height: 150px;
  overflow: auto;
  margin: auto;
  position: absolute;
  
  position: fixed;
  z-index: 999;
  background-color: #FFF;
}

.bg {
 display:none;
 position:absolute;
 top:0px;
 left:0px;
 background-color:#E0E0E0;
 width:100%;
 height:200%;
 opacity:0.5;
 z-index:998;
 top: 0; left: 0; bottom: 0; right: 0;
}
</style>

    <script type="text/javascript">

        var cursor = { x: 0, y: 0 };

        $(document).ready(function () {
            $(document).mousemove(function (e) {
                cursor.x = e.pageX;
                cursor.y = e.pageY;
            });
        });

        function showdiv(el)
        {
            // показываема див
         //   alert(el);
            $("#bg").show();
            $("#modalwindow").css({ top: cursor.y+5 , left: cursor.x+5  });
            $("#modalwindow").show();
            return false;
        }

        function hidediv() {
            // прячем див
            $("#bg").hide();
            $("#modalwindow").hide();

        }

    </script>

</head>
<body>
    <form id="form1" runat="server">

<!-- скрытый див и фон -->
  <div id="bg" class="bg" onclick="hidediv()" ></div>
     <div id="modalwindow" class="dialog">

     <input id="ОкBtn" type="button" class="ОкBtn button" onclick="hidediv()"  value="Ок" />
    </div>


    
       
        
        <asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1">
            <Columns>
                <asp:TemplateField HeaderText="surname" SortExpression="surname">
                    <EditItemTemplate>
                        <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("surname") %>'></asp:TextBox>
                    </EditItemTemplate>
                    <ItemTemplate>

                        <asp:LinkButton ID="LinkButton1"  runat="server" onclientclick='<%# "showdiv(\""+ Eval("name")+ "\");return false;" %>' Text='<%# Eval("surname") %>'></asp:LinkButton>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>


    </form>
</body>
</html>

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:SturnConnectionString %>" SelectCommand="SELECT [id], [surname], [name]  FROM [Users]"></asp:SqlDataSource>
...
Рейтинг: 0 / 0
17.09.2015, 10:54
| Ответить | Цитировать | Написать  
Закрытие всплывающего окна из GridView по клику вне его
    #39053697
Zoria
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Zoria
Участник
Oleg_OlegБерезовский, спасибо, работает. Осталось только понять как данными заполнить всплывающее окно.
Zoria, пока не разобрался с вашим примером. После var mpe = $find("gv1_mpe1_" + k) в mpe всегда null, не могу пока понять почему.
а вы свой пример на основе моего полностью привести можете?
...
Рейтинг: 0 / 0
17.09.2015, 11:49
| Ответить | Цитировать | Написать  
Закрытие всплывающего окна из GridView по клику вне его
    #39053738
Oleg_Oleg
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Oleg_Oleg
Гость
ZoriaOleg_OlegБерезовский, спасибо, работает. Осталось только понять как данными заполнить всплывающее окно.
Zoria, пока не разобрался с вашим примером. После var mpe = $find("gv1_mpe1_" + k) в mpe всегда null, не могу пока понять почему.
а вы свой пример на основе моего полностью привести можете?
Заработало так, как я делал в самом начале, но с вашим кодом в методе onShown. Получается что $find(sender._id) отрабатывает именно так как нужно. Спасибо большое за помощь.
...
Рейтинг: 0 / 0
17.09.2015, 12:19
| Ответить | Цитировать | Написать  
Закрытие всплывающего окна из GridView по клику вне его
    #39053741
Zoria
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Zoria
Участник
Oleg_OlegZoriaпропущено...

а вы свой пример на основе моего полностью привести можете?
Заработало так, как я делал в самом начале, но с вашим кодом в методе onShown. Получается что $find(sender._id) отрабатывает именно так как нужно. Спасибо большое за помощь.
ну ок.. а то я как правило, неработающих примеров не делаю, стало интересно что к чему ;)
...
Рейтинг: 0 / 0
17.09.2015, 12:21
| Ответить | Цитировать | Написать  
Закрытие всплывающего окна из GridView по клику вне его
    #39053746
Oleg_Oleg
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Oleg_Oleg
Гость
Березовский, ваш пример тоже работает, спасибо. Если не трудно, подскажите пожалуйста еще как сделать, чтобы всплывающее окно показывалось там где нужно в случае если на странице присутствует скроллинг. Если не скролил страницу, то окно появляется там где нужно, но если есть вертикальный скрол, то всплывающее окно улетает куда-то за пределы страницы.
...
Рейтинг: 0 / 0
17.09.2015, 12:23
| Ответить | Цитировать | Написать  
Закрытие всплывающего окна из GridView по клику вне его
    #39054039
Березовский
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Березовский
Участник
автор
стили не совсем корректно я задал.
вот одна из ссылок в гугле http://habrahabr.ru/post/238449/
Думаю, найдете при желании еще :)
...
Рейтинг: 0 / 0
17.09.2015, 15:29
| Ответить | Цитировать | Написать  
Закрытие всплывающего окна из GridView по клику вне его
    #39054128
Oleg_Oleg
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Oleg_Oleg
Гость
стили не совсем корректно я задал.
вот одна из ссылок в гугле http://habrahabr.ru/post/238449/
Думаю, найдете при желании еще :)[/quot]
Да, спасибо, я уже понял в какую сторону копать.
...
Рейтинг: 0 / 0
17.09.2015, 16:16
| Ответить | Цитировать | Написать  
Закрытие всплывающего окна из GridView по клику вне его
    #39054129
Oleg_Oleg
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Oleg_Oleg
Гость
Zoria, Березовский, спасибо еще раз, очень помогли.
...
Рейтинг: 0 / 0
17.09.2015, 16:18
| Ответить | Цитировать | Написать  
23 сообщений из 23, страница 1 из 1
Форумы / ASP.NET [игнор отключен] [закрыт для гостей] / Закрытие всплывающего окна из GridView по клику вне его
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]