この度、Ajax Control ToolkitでModalPopupExtenderを使ってモーダルダイアログを表示してみました。
IEでは問題ないのですが、Chromeではポストするたびにチカチカとちらつきます。
いらいらするので、回避方法を探してみました。
まず、ASP.NETでのモーダルダイアログについて調べてみました。
ASP.NET WEBアプリケーションでモーダルダイアログ表示
モーダルダイアログとは、ダイアログボックスを閉じるまでは、操作ができないダイアログボックスのことです。
一方、ダイアログボックス表示中でも他のウィンドウの操作可能なダイアログボックスのことをモードレスダイアログと呼びます。
モーダルダイアログを使えば、ユーザーに操作を強制することが可能になります。
ASP.NET でモーダルダイアログを実現するには、以下の 3通りの方法があります。
- JavaScript の showModalDialog() を使用
- JavaScript の window.open() を使用してフォーカスを常に取得
- Ajax Control Toolkit の ModalPopupExtender コントロールを使用
今回、Ajax Control Toolkit の ModalPopupExtender を使ってモーダルダイアログを作ってみました。
Ajax Control Toolkit については以下をご覧ください。
モーダルポップアップは次の通りです。
|
1 |
<asp:Panel ID="pnlDialog" runat="server"> |
この状態だと、IEでは問題ないのですが、Chromeでは、最初の表示でパネルが一瞬ちらついて見えます。
ModalPopupExtender でちらつきを回避する方法
調べてみたところ、pnlDialog に
style="display:none"
と指定すれば良いようです。
|
1 |
<asp:Panel ID="pnlDialog" runat="server" style="display:none"> |
確かにこうすれば、ちらつきは消えました。
うーん。Chromeの仕様なのか？
プログラミングの無料レッスン体験
約8,000名の受講生と80社以上の導入実績のあるプログラミングやWebデザインのオンラインマンツーマンレッスンCodecamp
＜Codecampの特徴＞
1 現役エンジニアによる指導
2オンラインでのマンツーマン形式の講義
3大手企業にも導入されている実践的なカリキュラム
↓無料体験レッスン実施中です。
コメント