C# と VB.NET の質問掲示板

ASP.NET、C++/CLI、Java 何でもどうぞ

C# と VB.NET の入門サイト

Re[5]: ModalPopupExtenderの画面のちらつき

(過去ログ 123 を表示中)

[トピック内 15 記事 (1 - 15 表示)]　 << 0 >>

■73703 / inTopicNo.1)

　ModalPopupExtenderの画面のちらつき

▼■

□投稿者/ スカーレット (19回)-(2014/10/23(Thu) 20:14:49)

分類:[ASP.NET (VB)]　

開発環境
  VS2008
  ASP.NET 3.5
  AJAX Control Toolkit .NET 3.5 December 2013 Release Version 7.1213

下記のページを参考に、PopupControlIDで指定しているパネルのstyleにdisplay:noneを指定しても、
画面がちらついてしまいます。
http://www.atmarkit.co.jp/bbs/phpBB/viewtopic.php?topic=45453&forum=7

他に方法をご存知の方がいらっしゃいましたらご教授お願い申し上げます。

＃参考に該当箇所のソースを記載しておきます。
            <asp:Button ID="DummyButton1" runat="server" style="display: none" />
            <asp:Button ID="Btn_EICOMM" runat="server" BackColor="#05A4D9" Font-Bold="True" 
                Font-Names="ＭＳ Ｐゴシック" Font-Size="11pt" Text="営業ｺﾒﾝﾄ" Height="28px" 
                Width="85px" />
            <asp:Panel ID="pnlDialog1" runat="server" BackColor="#FFFFCC" 
                Style="display: none" BorderColor="#CCECFF" BorderStyle="Solid" 
                BorderWidth="3px">
                <p>
                    <asp:TextBox ID="txt_Kikaino1" runat="server" ReadOnly="True" Font-Bold="True" 
                        Font-Names="ＭＳ Ｐゴシック" Font-Size="16pt" Height="22px" Width="78px" 
                        style="margin-top: 10px; margin-left: 20px; text-align: right"></asp:TextBox>
                    <asp:Label ID="Label25" runat="server" Font-Bold="True" Font-Names="ＭＳ ゴシック" 
                        Font-Size="14pt" Text="営業コメント" style="margin-left: 10px"></asp:Label>
                </p>
                <p>
                    <asp:TextBox ID="Txt_COMM1" runat="server" TextMode="MultiLine" ReadOnly="True" 
                        Font-Names="ＭＳ Ｐゴシック" Font-Size="14pt" Height="302px" Width="518px" 
                        style="margin-bottom: 10px; margin-left: 20px"></asp:TextBox>
                    <asp:Button ID="Button1" runat="server" Text="閉じる" />
                </p>
            </asp:Panel>
            <asp:ModalPopupExtender ID="modal1" runat="server" 
                TargetControlID="DummyButton1" PopupControlID="pnlDialog1" 
                CancelControlID="Button1" DropShadow="true" />

引用返信 編集キー/

■73704 / inTopicNo.2)

　Re[1]: ModalPopupExtenderの画面のちらつき

▲▼■

□投稿者/ WebSurfer (366回)-(2014/10/23(Thu) 20:58:36)

■No73703 (スカーレットさん) に返信

スタイル関係のコードは全て削除して（余計なコードは読む気がしなくなります）、コピペ
すればあなたの問題を再現できるコードをアップしてください。

ちなみに、自分が使っている限りは「画面がちらついてしまいます」ということは一切ない
ので理解に苦しみます。

引用返信 編集キー/

■73705 / inTopicNo.3)

　Re[2]: ModalPopupExtenderの画面のちらつき

▲▼■

□投稿者/ スカーレット (20回)-(2014/10/23(Thu) 21:17:27)

■No73704 (WebSurfer さん) に返信
> ■No73703 (スカーレットさん) に返信
>
> スタイル関係のコードは全て削除して（余計なコードは読む気がしなくなります）、コピペ
> すればあなたの問題を再現できるコードをアップしてください。
>
> ちなみに、自分が使っている限りは「画面がちらついてしまいます」ということは一切ない
> ので理解に苦しみます。

WebSurfer さん、ご返信ありがとうございます。

ASPのボタンを押下して、他の画面へ遷移（Response.Redirect）する際にどうしても画面の左下に
ポップアップがちらついてしまいます。。

引用返信 編集キー/

■73706 / inTopicNo.4)

　Re[3]: ModalPopupExtenderの画面のちらつき

▲▼■

□投稿者/ WebSurfer (367回)-(2014/10/23(Thu) 21:30:11)

■No73705 (スカーレットさん) に返信

先のレスで、

> スタイル関係のコードは全て削除して、コピペすればあなたの問題を再現でき
> るコードをアップしてください。

とお願いしましたが、できない事情があるのでしょうか？

引用返信 編集キー/

■73707 / inTopicNo.5)

　Re[3]: ModalPopupExtenderの画面のちらつき

▲▼■

□投稿者/ もりお (28回)-(2014/10/23(Thu) 22:53:41)

■No73705 (スカーレットさん) に返信

AJAX Control ToolkitのサンプルサイトのModalPopupも同じような動作をするようですね。

ModalPopup Sample
http://www.ajaxcontroltoolkit.com/ModalPopup/ModalPopup.aspx

・Click here to change the paragraph styleをクリックせずに別のリンクをクリックすると問題ない。
・Click here to change the paragraph styleをクリックしてModalPopupを表示し、閉じて別のリンクをクリックすると
ModalPopupのパネルがちらっと見える。

Click here to change the paragraph styleをクリックしなかったときと
Click here to change the paragraph styleをクリックしたときでは
パネルのスタイルが異なるようです。

Click here to change the paragraph styleをクリックしなかったとき
<div id="ctl00_SampleContent_Panel1" class="modalPopup" style="display: none">

Click here to change the paragraph styleをクリックしたとき
<div id="ctl00_SampleContent_Panel1" class="modalPopup" style="position: relative; z-index: 2;">

ModalPopupを閉じるときにパネルのスタイルにdisplay: noneを設定すれば良さそうな気がしますが、
私にはやり方がわかりません。閉じるときのイベントはなにかありますかね。ボタンのクリックイベントで
いけますかしら。

引用返信 編集キー/

■73708 / inTopicNo.6)

　Re[4]: ModalPopupExtenderの画面のちらつき

▲▼■

□投稿者/ WebSurfer (368回)-(2014/10/23(Thu) 23:29:34)

引用返信 編集キー/

■73712 / inTopicNo.7)

　Re[4]: ModalPopupExtenderの画面のちらつき

▲▼■

□投稿者/ スカーレット (21回)-(2014/10/24(Fri) 11:49:48)

■No73707 (もりおさん) に返信
> ■No73705 (スカーレットさん) に返信
>
> AJAX Control ToolkitのサンプルサイトのModalPopupも同じような動作をするようですね。
>
> ModalPopup Sample
> http://www.ajaxcontroltoolkit.com/ModalPopup/ModalPopup.aspx
>
> ・Click here to change the paragraph styleをクリックせずに別のリンクをクリックすると問題ない。
> ・Click here to change the paragraph styleをクリックしてModalPopupを表示し、閉じて別のリンクをクリックすると
> ModalPopupのパネルがちらっと見える。
>
> Click here to change the paragraph styleをクリックしなかったときと
> Click here to change the paragraph styleをクリックしたときでは
> パネルのスタイルが異なるようです。
>
> Click here to change the paragraph styleをクリックしなかったとき
> <div id="ctl00_SampleContent_Panel1" class="modalPopup" style="display: none">
>
> Click here to change the paragraph styleをクリックしたとき
> <div id="ctl00_SampleContent_Panel1" class="modalPopup" style="position: relative; z-index: 2;">
>
> ModalPopupを閉じるときにパネルのスタイルにdisplay: noneを設定すれば良さそうな気がしますが、
> 私にはやり方がわかりません。閉じるときのイベントはなにかありますかね。ボタンのクリックイベントで
> いけますかしら。

もりおさん、ご返信ありがとうございます。

パネルのスタイルにdisplay: noneを設定しているのですが、ちらついてしまいます。。

引用返信 編集キー/

■73713 / inTopicNo.8)

　Re[4]: ModalPopupExtenderの画面のちらつき

▲▼■

□投稿者/ スカーレット (22回)-(2014/10/24(Fri) 11:54:42)

■No73706 (WebSurfer さん) に返信
> ■No73705 (スカーレット さん) に返信
> 
> 先のレスで、
> 
>>スタイル関係のコードは全て削除して、コピペすればあなたの問題を再現でき
>>るコードをアップしてください。
> 
> とお願いしましたが、できない事情があるのでしょうか？

WebSurfer さん、ご返信ありがとうございます。

コードは下記の通りです。

【Default.aspx】
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="WebApplication1._Default" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <input style="position: absolute; top: 0px; left: 0px; height: 0px; width: 0px; visibility: hidden" 
        onclick="return false;" type="submit" />
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </asp:ToolkitScriptManager>
    <div>
    
    </div>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:Button ID="Button1" runat="server" style="display: none" />
            <asp:Button ID="Button2" runat="server" Text="ポップアップ" />
            <asp:Panel ID="Panel1" runat="server" Style="display: none">
                <p>
                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                </p>
                <p>
                    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
                    <asp:Button ID="Button3" runat="server" Text="閉じる" />
                </p>
            </asp:Panel>
            <asp:ModalPopupExtender ID="modal1" runat="server" 
                TargetControlID="Button1" PopupControlID="Panel1" 
                CancelControlID="Button3" DropShadow="true" />
            <asp:Button ID="Button4" runat="server" Text="次へ" />
        </ContentTemplate>
    </asp:UpdatePanel>
    </form>
</body>
</html>

【Default.aspx.vb】
    Private Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button2.Click
        modal1.Show()
    End Sub

    Private Sub Button4_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button4.Click
        Response.Redirect("WebForm1.aspx")
    End Sub

ポップアップを表示した後、[次へ]で画面遷移しようとするとポップアップがちらついてしまいます。

どうぞ、よろしくお願い申し上げます。

引用返信 編集キー/

■73714 / inTopicNo.9)

　Re[5]: ModalPopupExtenderの画面のちらつき

▲▼■

□投稿者/ スカーレット (23回)-(2014/10/24(Fri) 12:01:32)

■No73713 (スカーレットさん) に返信
> ■No73706 (WebSurfer さん) に返信
>>■No73705 (スカーレットさん) に返信
>>
>>先のレスで、
>>
> >>スタイル関係のコードは全て削除して、コピペすればあなたの問題を再現でき
> >>るコードをアップしてください。
>>
>>とお願いしましたが、できない事情があるのでしょうか？
>
> WebSurfer さん、ご返信ありがとうございます。
>
> コードは下記の通りです。
>
> 【Default.aspx】
> <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="WebApplication1._Default" %>
>
> <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
>
> <html xmlns="http://www.w3.org/1999/xhtml" >
> <head runat="server">
> <title></title>
> </head>
> <body>
> <form id="form1" runat="server">
> <input style="position: absolute; top: 0px; left: 0px; height: 0px; width: 0px; visibility: hidden"
> onclick="return false;" type="submit" />
> <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
> </asp:ToolkitScriptManager>
> <div>
>
> </div>
> <asp:UpdatePanel ID="UpdatePanel1" runat="server">
> <ContentTemplate>
> <asp:Button ID="Button1" runat="server" style="display: none" />
> <asp:Button ID="Button2" runat="server" Text="ポップアップ" />
> <asp:Panel ID="Panel1" runat="server" Style="display: none">
> <p>
> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
> </p>
> <p>
> <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
> <asp:Button ID="Button3" runat="server" Text="閉じる" />
> </p>
> </asp:Panel>
> <asp:ModalPopupExtender ID="modal1" runat="server"
> TargetControlID="Button1" PopupControlID="Panel1"
> CancelControlID="Button3" DropShadow="true" />
> <asp:Button ID="Button4" runat="server" Text="次へ" />
> </ContentTemplate>
> </asp:UpdatePanel>
> </form>
> </body>
> </html>
>
> 【Default.aspx.vb】
> Private Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button2.Click
> modal1.Show()
> End Sub
>
> Private Sub Button4_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button4.Click
> Response.Redirect("WebForm1.aspx")
> End Sub
>
> ポップアップを表示した後、[次へ]で画面遷移しようとするとポップアップがちらついてしまいます。
>
> どうぞ、よろしくお願い申し上げます。
>

ちなみに、ブラウザはFirefoxです。

引用返信 編集キー/

■73715 / inTopicNo.10)

　Re[6]: ModalPopupExtenderの画面のちらつき

▲▼■

□投稿者/ WebSurfer (369回)-(2014/10/24(Fri) 14:40:33)

■No73714 (スカーレットさん) に返信

> ちなみに、ブラウザはFirefoxです。

アップされたコードは UpdatePanel の使用方法などが変なのですが（失礼）、
とりあえずそのままコピペして試してみました。

質問者さんの環境と全く同じものがすぐには用意できなかったので、とりあえず
以下の環境で試しました。

ASP.NET 4
AjaxControlToolkit.dll バージョン 4.1.7.607
Vista SP2
IE9, Firefox 33.0, Chrome 38.0.2125.104, Safari 5.1.7, Opera 12.17
IIS7
Visual Studio 2010 SP1

［ポップアップ］ボタンクリック ⇒ ModalPopup (Panel1) 表示 ⇒ ModalPopup
上の［閉じる］ボタンをクリック ⇒ ModalPopup 非表示 ⇒ ［次へ］ボタンをク
リック・・・という手順で、Firefox だけは確かに Panel1 が表示されました。

（ひょっとしたら他のブラウザでも出ていたかもしれませんが、少なくとも目で
視認できるレベルではないです）

どうも、クライアントスクリプトとの相性（？）の問題で、［次へ］ボタンクリ
ックで submit されるタイミングで Panel1 の style="display: none" の設定が
外れてしまうような感じです。（推測です）

解決策は、対症療法的ですが、［次へ］ボタン (Button4) の OnClientClick プ
ロパティに以下のようなスクリプトを設定すればこの問題は回避できるはずです。

document.getElementById('Panel1').setAttribute('style', 'display: none;');

お試しください。

あと、この問題とは関係ないですが、アップされたコードにはいろいろ変なところ
が多いです。特に UpdatePanel。見直されることをお勧めします。。

引用返信 編集キー/

■73716 / inTopicNo.11)

　Re[7]: ModalPopupExtenderの画面のちらつき

▲▼■

□投稿者/ スカーレット (24回)-(2014/10/24(Fri) 15:06:14)

■No73715 (WebSurfer さん) に返信
> ■No73714 (スカーレットさん) に返信
>
>>ちなみに、ブラウザはFirefoxです。
>
> アップされたコードは UpdatePanel の使用方法などが変なのですが（失礼）、
> とりあえずそのままコピペして試してみました。
>
> 質問者さんの環境と全く同じものがすぐには用意できなかったので、とりあえず
> 以下の環境で試しました。
>
> ASP.NET 4
> AjaxControlToolkit.dll バージョン 4.1.7.607
> Vista SP2
> IE9, Firefox 33.0, Chrome 38.0.2125.104, Safari 5.1.7, Opera 12.17
> IIS7
> Visual Studio 2010 SP1
>
> ［ポップアップ］ボタンクリック ⇒ ModalPopup (Panel1) 表示 ⇒ ModalPopup
> 上の［閉じる］ボタンをクリック ⇒ ModalPopup 非表示 ⇒ ［次へ］ボタンをク
> リック・・・という手順で、Firefox だけは確かに Panel1 が表示されました。
>
> （ひょっとしたら他のブラウザでも出ていたかもしれませんが、少なくとも目で
> 視認できるレベルではないです）
>
> どうも、クライアントスクリプトとの相性（？）の問題で、［次へ］ボタンクリ
> ックで submit されるタイミングで Panel1 の style="display: none" の設定が
> 外れてしまうような感じです。（推測です）
>
> 解決策は、対症療法的ですが、［次へ］ボタン (Button4) の OnClientClick プ
> ロパティに以下のようなスクリプトを設定すればこの問題は回避できるはずです。
>
> document.getElementById('Panel1').setAttribute('style', 'display: none;');
>
> お試しください。
>
> あと、この問題とは関係ないですが、アップされたコードにはいろいろ変なところ
> が多いです。特に UpdatePanel。見直されることをお勧めします。。
>

WebSurfer さん、早速のご回答ありがとうございます。

一度、試してみます。

＃UpdatePanelの件ですが、使用しないとポップアップがウィンドウの中央に表示される前に
　変な位置に一度表示されてしまうのです。

引用返信 編集キー/

■73717 / inTopicNo.12)

　Re[8]: ModalPopupExtenderの画面のちらつき

▲▼■

□投稿者/ スカーレット (25回)-(2014/10/24(Fri) 15:24:28)

■No73716 (スカーレットさん) に返信
> ■No73715 (WebSurfer さん) に返信
>>■No73714 (スカーレットさん) に返信
>>
> >>ちなみに、ブラウザはFirefoxです。
>>
>>アップされたコードは UpdatePanel の使用方法などが変なのですが（失礼）、
>>とりあえずそのままコピペして試してみました。
>>
>>質問者さんの環境と全く同じものがすぐには用意できなかったので、とりあえず
>>以下の環境で試しました。
>>
>>ASP.NET 4
>>AjaxControlToolkit.dll バージョン 4.1.7.607
>>Vista SP2
>>IE9, Firefox 33.0, Chrome 38.0.2125.104, Safari 5.1.7, Opera 12.17
>>IIS7
>>Visual Studio 2010 SP1
>>
>>［ポップアップ］ボタンクリック ⇒ ModalPopup (Panel1) 表示 ⇒ ModalPopup
>>上の［閉じる］ボタンをクリック ⇒ ModalPopup 非表示 ⇒ ［次へ］ボタンをク
>>リック・・・という手順で、Firefox だけは確かに Panel1 が表示されました。
>>
>>（ひょっとしたら他のブラウザでも出ていたかもしれませんが、少なくとも目で
>>視認できるレベルではないです）
>>
>>どうも、クライアントスクリプトとの相性（？）の問題で、［次へ］ボタンクリ
>>ックで submit されるタイミングで Panel1 の style="display: none" の設定が
>>外れてしまうような感じです。（推測です）
>>
>>解決策は、対症療法的ですが、［次へ］ボタン (Button4) の OnClientClick プ
>>ロパティに以下のようなスクリプトを設定すればこの問題は回避できるはずです。
>>
>>document.getElementById('Panel1').setAttribute('style', 'display: none;');
>>
>>お試しください。
>>
>>あと、この問題とは関係ないですが、アップされたコードにはいろいろ変なところ
>>が多いです。特に UpdatePanel。見直されることをお勧めします。。
>>
>
> WebSurfer さん、早速のご回答ありがとうございます。
>
> 一度、試してみます。
>
> ＃UpdatePanelの件ですが、使用しないとポップアップがウィンドウの中央に表示される前に
> 　変な位置に一度表示されてしまうのです。
>

試してみましたが、結果は変わりませんでした。
残念です。。

他に思い当たる対処法がありましたら、ご教授願えると助かります。
どうぞ、よろしくお願い致します。

引用返信 編集キー/

■73718 / inTopicNo.13)

　Re[9]: ModalPopupExtenderの画面のちらつき

▲▼■

□投稿者/ WebSurfer (370回)-(2014/10/24(Fri) 15:50:52)

■No73717 (スカーレットさん) に返信

> ＃UpdatePanelの件ですが、使用しないとポップアップがウィンドウの中央に表示される前に
>　変な位置に一度表示されてしまうのです。

ホントにアップされたコードで試しているんでしょうか？　であれば、そんなことは決して
ないはずで、それがそもそも変ですね。

今そこまで考えると話が発散するので、とりあえずそれは置いておいて・・・

> 試してみましたが、結果は変わりませんでした。

［次へ］ボタン (Button4) の OnClientClick の設定は以下のようにするんですが、あって
ますか？

<asp:Button ID="Button4" runat="server" Text="次へ"
OnClientClick="document.getElementById('Panel1').setAttribute('style', 'display: none;');" />

アップされたコードではマスターページは使ってないようですが、もし使っているとすると、
パネルを名前つきコンテナの中に入れることになるので、id は Panel1 ではなくなって、
getElementById('Panel1') ではパネルの要素が取得できないのは認識してますか？

引用返信 編集キー/

■73719 / inTopicNo.14)

　Re[10]: ModalPopupExtenderの画面のちらつき

▲▼■

□投稿者/ スカーレット (26回)-(2014/10/24(Fri) 16:09:36)

■No73718 (WebSurfer さん) に返信
> ■No73717 (スカーレットさん) に返信
>
>>＃UpdatePanelの件ですが、使用しないとポップアップがウィンドウの中央に表示される前に
> >　変な位置に一度表示されてしまうのです。
>
> ホントにアップされたコードで試しているんでしょうか？　であれば、そんなことは決して
> ないはずで、それがそもそも変ですね。
>
> 今そこまで考えると話が発散するので、とりあえずそれは置いておいて・・・
>
>>試してみましたが、結果は変わりませんでした。
>
> ［次へ］ボタン (Button4) の OnClientClick の設定は以下のようにするんですが、あって
> ますか？
>
> <asp:Button ID="Button4" runat="server" Text="次へ"
> OnClientClick="document.getElementById('Panel1').setAttribute('style', 'display: none;');" />
>
> アップされたコードではマスターページは使ってないようですが、もし使っているとすると、
> パネルを名前つきコンテナの中に入れることになるので、id は Panel1 ではなくなって、
> getElementById('Panel1') ではパネルの要素が取得できないのは認識してますか？
>

WebSurfer さん、度々のご返信ありがとうございます。

document.getElementById('Panel1').setAttribute('style', 'display: none;'); の部分を
関数にしておりました。
関数ではなく、直接プロパティに指定すると実現できました。
本当に感謝です。

引用返信 編集キー/

■73726 / inTopicNo.15)

　Re[5]: ModalPopupExtenderの画面のちらつき

▲▼■

□投稿者/ WebSurfer (371回)-(2014/10/27(Mon) 10:32:53)

追加情報です。

ModalPopupExtender に設定した DropShadow="true" が問題の一因になっている
ようです。

DropShadow="true" となっていると、Panel1 の外側が div 要素で囲われ、それ
に "display: none;" が削除・追加されて ModalPopup の表示/非表示が切り替え
られます。（false になっていると div 要素で囲うことはなく、Panel1 に直接
"display: none;" が削除・追加されます）

Panel1 に "display: none;" を設定しておいても、初期画面から ModalPopup を
表示するとその設定は削除され、その後非表示にしても復活しません。（その外
側の div 要素に動的に追加される display: none; によって非表示になる）

Firefox の場合、リダイレクトされて GET に行くときに外側の div 要素の影響が
なくなる感じです。（具体的にどうなっているのかは不明）

問題は解決しているようですので「解決済み」にしておきます。

解決済み

引用返信 編集キー/

トピック内ページ移動 / << 0 >>

このトピックに書きこむ

過去ログには書き込み不可

- Child Tree -