ブラウザで小さなモーダルウィンドウを表示

Question

VS2010、C＃を使用してASP.NET Webアプリケーションを開発しました。最近、画面上部に小さなウィンドウ（何とかモーダル）が表示されているサイトを見てきました。 （灰色のアルファ層を持つように）何らかの形で淡色表示されているので、ユーザーはメイン画面で何もできず、小さなウィンドウにのみフォーカスが当てられます。

の例では、ここで見つけることができます：

http://www.geda.de/Permanentanlagen/Industrieaufzuege/Materialaufzuege、

あなたは、ウィンドウを表示する画像をクリックすることができます。私はこのテクニックがfacebookでも使われていると聞いてきました

どうすればこの効果を得ることができますか？私はそれがjavascript、右だと思いますか？私はVSでこの小さなウィンドウを設計し、ツールボックスを使用することはできますか？それを表示して他の要素を無効にするにはどうすればいいですか？スクリーンの上にアルファ層をレンダリングする方法は？ヒントやサンプルはありますか？私はあなたがこのビューを達成するためのスクリプトがたくさんあるクロスブラウザソリューション

Answer 1

を探してる

、これはお勧めして非常に軽いです。

http://www.zurb.com/playground/reveal-modal-plugin

Answer 2

あなたは非常に簡単にしたいポップアップを実装するためにAjaxControlToolkitを使用することができます。 http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/ModalPopup/ModalPopup.aspx

Answer 3

これはjavascriptで行われます。これは、ダイナミックHTMLが生成されます（高さと幅が100％で、一部の不透明度設定があるdiv）。

jQuery UIとFancyBoxのプラグインをご覧ください。

FancyBoxは、Webページの上に浮かぶMacスタイルの「ライトボックス」内に画像、HTMLコンテンツ、マルチメディアを表示するツールです。

Answer 4

多くの名前（ライトボックス、モーダルダイアログ、オーバーレイ）がありますが、一般的な考え方は、セクションの上に半透明のレイヤーを描画し、ダイアログを表示することです。画像、その他何か、その上に表示されます。

同じ効果を自分で作成することができます。ここでは、jQueryを使用してサンプルコードを作成しています。

(function ($) { 
    $.fn.showDialog = function (options) { 
     var defaults = { element: "<div></div>", width: "", height: "" }; 
     options = $.extend(defaults, options); 
     var element = this; 
     var opacityLayer = $("body > div#dialog-container > div#opacity-layer"); 
     if (opacityLayer = 'undefined') { 
      opacityLayer = $("<div id='dialog-container'><div id='opacity-layer'></div></div>").appendTo("body").find(' > #opacity-layer'); 
     } 
     opacityLayer.addClass('opacity-layer'); 
     opacityLayer.animate({ 'opacity': '0.7' }, "fast", function() { 
      if (!element.addClass) { 
       element = $(element); 
      } 
      element.addClass('dialog rounded-cornered'); 
      //opacityLayer.html(element); 
      opacityLayer.after(element); 
      //opacityLayer.append("<div class='actions'><a id='close-dialog' class='action dialog-action' href='javascript:void(0);'>بازگشت</a></div>"); 
      element.append("<span id='close-dialog'></span>"); 
      element.find('#close-dialog').click(function() { 
       hideDialog(); 
      }); 
     }); 
     return this; 
    } 
})(jQuery);