【参照】Create a Beautiful Looking Custom Dialog Box With jQuery and CSS3
<!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ // クリックで、オーバーレイ、ダイアログボックス、ボタンを非表示 $('a.btn-ok, #dialog-overlay, #dialog-box').click(function (){ $('#dialog-overlay, #dialog-box').hide(); return false; }); // ウィンドウがリサイズされたら、ダイアログボックスをセンタリング表示する関数を呼ぶ $(window).resize(function () { // ダイアログボックスが表示されている場合のみ実行 if (!$('#dialog-box').is(':hidden')) popup(); }); // ダイアログをポップアップする関数 }); function popup(message){ // スクリーンの幅と高さを取得 var maskHeight = $(document).height(); var maskWidth = $(window).width(); // 垂直方法および水平方向にセンタリング表示する位置を計算 // var dialogTop = (maskHeight/3) - ($('#dialog-box').height()); var dialogTop = ($(window).height()/2) - ($('#dialog-box').height()); var dialogLeft = (maskWidth/2) - ($('#dialog-box').width()/2); // オーバーレイとダイアログボックスを表示 $('#dialog-overlay').css({height:maskHeight, width:maskWidth}).show(); $('#dialog-box').css({top:dialogTop, left:dialogLeft}).show(); // ダイアログボックス内にメッセージを表示 $('#dialog-message').html(message); } </script> <!-- CSS --> <style type="text/css"> #dialog-overlay { /* set it to fill the whil screen */ width:100%;height:100%; /* transparency for different browsers */ filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; background:#000; /* make sure it appear behind the dialog box but above everything else */ position:absolute; top:0;left:0; z-index:3000; /* hide it by default */ display:none; } #dialog-box { /* css3 drop shadow */ -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); /* css3 border radius */ -moz-border-radius: 5px; -webkit-border-radius: 5px; background:#eee; /* styling of the dialog box, i have a fixed dimension for this demo */ width:328px; /* make sure it has the highest z-index */ position:absolute; z-index:5000; /* hide it by default */ display:none; } #dialog-box .dialog-content { /* style the content */ text-align:left; margin:13px; padding:10px; color:#666; font-family:arial; font-size:11px; } a.button { /* styles for button */ margin:10px auto 0 auto; padding: 5px 10px 6px; text-align:center; display: block; width:50px; color: #fff; text-decoration: none; font-weight: bold; line-height: 1; /* button color */ background-color: #e33100; /* css3 implementation :) */ /* rounded corner */ -moz-border-radius: 5px; -webkit-border-radius: 5px; /* drop shadow */ -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); /* text shaow */ text-shadow: 0 -1px 1px rgba(0,0,0,0.25); border-bottom: 1px solid rgba(0,0,0,0.25); position: relative; cursor: pointer; } a.button:hover { background-color: #c33100; } /* extra styling */ #dialog-box .dialog-content p { font-weight:700;margin:0; } #dialog-box .dialog-content ul { margin:10px 0 10px 20px; padding:0; height:50px; } </style> <link rel="stylesheet" type="text/css" href="/common/css/example.css"></head> <body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1> <h3 class='h'>実行結果</h3> <div id="wrap"> <h1>設置サンプル</h1> <p>【参照】<a href='http://www.queness.com/post/1696/create-a-beautiful-looking-custom-dialog-box-with-jquery-and-css3'>Create a Beautiful Looking Custom Dialog Box With jQuery and CSS3</a></p> <!-- CODE --> <p> <a href="javascript:popup('ここにエラーメッセージを書きます。ここにエラーメッセージを書きます。ここにエラーメッセージを書きます。ここにエラーメッセージを書きます。ここにエラーメッセージを書きます。')">ポップアップ</a> </p> <div id="dialog-overlay"></div> <div id="dialog-box"> <div class="dialog-content"> <div id="dialog-message"></div> <a href="#" class="button">Close</a> </div> </div> <!-- / CODE --> </body> </html>