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



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

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

В этом решении давайте попробуем просто скрыть по названию класса:
задайте ему
Код: 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, 12:38
    #39052645
Oleg_Oleg
Oleg_Oleg
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Закрытие всплывающего окна из GridView по клику вне его
БерезовскийЯ бы предложил использовать один скрытый див. Делать его видимым по клику на ссылку, позиционировать рядом с положением курсора (по координатам).

В этом решении давайте попробуем просто скрыть по названию класса:
задайте ему
Код: 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:39
    #39052648
Березовский
Березовский
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Закрытие всплывающего окна из GridView по клику вне его
Попробую набросать пример...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
16.09.2015, 13:01
    #39052668
Zoria
Zoria
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Закрытие всплывающего окна из GridView по клику вне его
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:44
    #39052760
Березовский
Березовский
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Закрытие всплывающего окна из GridView по клику вне его
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
| Ответить | Цитировать | Написать  
17.09.2015, 09:18
    #39053521
Oleg_Oleg
Oleg_Oleg
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Закрытие всплывающего окна из GridView по клику вне его
Березовский, спасибо, работает. Осталось только понять как данными заполнить всплывающее окно.
Zoria, пока не разобрался с вашим примером. После var mpe = $find("gv1_mpe1_" + k) в mpe всегда null, не могу пока понять почему.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.09.2015, 09:46
    #39053547
Березовский
Березовский
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Закрытие всплывающего окна из GridView по клику вне его
А что вам туда надо передать? ( значения какие то?)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.09.2015, 10:02
    #39053562
Oleg_Oleg
Oleg_Oleg
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Закрытие всплывающего окна из GridView по клику вне его
БерезовскийА что вам туда надо передать? ( значения какие то?)
Да из БД, теперь когда всплывающим окном стал div, находящийся вне грида, надо наверное как-то аяксом данные получать.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.09.2015, 10:54
    #39053618
Березовский
Березовский
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Закрытие всплывающего окна из GridView по клику вне его
Можно наверное поупражняться и с передачей параметра( ов) в функцию. Типа такого
Код: 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, 11:49
    #39053697
Zoria
Zoria
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Закрытие всплывающего окна из GridView по клику вне его
Oleg_OlegБерезовский, спасибо, работает. Осталось только понять как данными заполнить всплывающее окно.
Zoria, пока не разобрался с вашим примером. После var mpe = $find("gv1_mpe1_" + k) в mpe всегда null, не могу пока понять почему.
а вы свой пример на основе моего полностью привести можете?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.09.2015, 12:19
    #39053738
Oleg_Oleg
Oleg_Oleg
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Закрытие всплывающего окна из GridView по клику вне его
ZoriaOleg_OlegБерезовский, спасибо, работает. Осталось только понять как данными заполнить всплывающее окно.
Zoria, пока не разобрался с вашим примером. После var mpe = $find("gv1_mpe1_" + k) в mpe всегда null, не могу пока понять почему.
а вы свой пример на основе моего полностью привести можете?
Заработало так, как я делал в самом начале, но с вашим кодом в методе onShown. Получается что $find(sender._id) отрабатывает именно так как нужно. Спасибо большое за помощь.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.09.2015, 12:21
    #39053741
Zoria
Zoria
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Закрытие всплывающего окна из GridView по клику вне его
Oleg_OlegZoriaпропущено...

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


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