モーダルウィンドウでHTMLマークアップを表示

Question

値がHTMLのフラグメントであるパラメータを受け取るJavaScript関数があります。このコンテンツを中央のモーダルダイアログ（閉じるボタン付き）に表示したいと思います。

var showContent = function(content) { 
    // TODO show content in model dialog 
} 

私がいる限り、それはかなり小さいですと、すでにjQueryのを使用していますし、必要に応じて別のプラグインをインストールする気にしません。私はJQueryUIを使用していませんし、他のもののためにそれを使用しないので、それを避けることを好むでしょう。

Answer 1

このプラグインは有望に見える：SimpleModal（9.6キロバイトの縮小さ）

あなたが選択した要素の内容で、またはコンテンツなどの一部のHTMLでそれを開きます。

$("selector").modal(); 
$.modal("<p>Hello world</p>"); 

だからあなたの場合には、

0123：

var showContent = function(content) { 
    $.modal(content); 
} 

あなたが唯一の2スタイルを必要とする：あなたはこれを行うことができます

それは（デモページに）次のようになります。あなたは以下のリンクを確認することができます

Answer 2

。

http://www.queness.com/resources/html/modal/jquery-modal-window.html

Answer 3

あなたが任意のプラグインなしでそれを行うことができます...ただ、これを使用します。

HTML：

<div class="overlay-div"> 
<div class="modal-div"> 
      <div style="float:right" class="x-button">X</div> 
</div> 
</div> 

CSS：

 .overlay-div 
     { 
      display:none; 
      z-index:100; 
      background-color:rgba(0,0,0,0.44); 
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#44000000,endColorstr=#44000000)\9; //for IE  
      position:absolute; 
      top:0; 
      left:0; 

     } 

     .overlay-div .modal-div 
     { 
      width:500px; 
      height:480px; 
      position:fixed; 
      top:50%; 
      left:50%; 
      margin:-240px 0 0 -250px; //must be proportional to width and height 
      padding:25px; 
      background:#fff; 
      z-index:1; 
     } 

     .x-button 
     { 
      cursor:pointer; 
     } 

Javascriptを：

var showContent = function(content) { 
    $(".overlay-div").width($("html").width()); 
    $(".overlay-div").height(getDocHeight()); 
    $(".modal-div").append(content); 
    $(".overlay-div").show(); 
} 

$("#x-button").click(function() { 
      $(".overlay-div").hide(); 
     }); 

//Cross-browser way to get page height 
function getDocHeight() { 
    var D = document; 
    return Math.max(
     Math.max(D.body.scrollHeight, D.documentElement.scrollHeight), 
     Math.max(D.body.offsetHeight, D.documentElement.offsetHeight), 
     Math.max(D.body.clientHeight, D.documentElement.clientHeight) 
      ); 
}