ページ上のコンテンツをモーダルウィンドウに表示します。
あいうえお
外部ファイルを読込んでウィンドウ内に表示します。
ダイアログ view (dialog)
jqDnR.jsを使用した、ドラッグ&ドロップ可能なダイアログ。
アラート view (alert)
jqDnR.js使用。外部ファイルを読込んでアラート内に表示します。
Please wait...
通知ウィンドウ view (notice)
jqDnR.js使用した、ドラッグ&ドロップ可能な通知ウィンドウ。開閉時にスライドアニメーションします。
当サイトの新着情報はこちら
<!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>jqModal | 設置サンプル</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.2.6/jquery.min.js"></script> <script type="text/javascript" src="/content/lib/jquery/jqModal.js"></script> <!-- Optional Javascript for Drag'n'Resize --> <script type="text/javascript" src="/content/lib/jquery/jqDnR.js"></script> <script type="text/javascript"> $(function(){ /* デフォルト */ $('#dialog').jqm(); /* Ajax */ $('#ex2').jqm({ajax: '/content/demo/sample_utf-8.txt', trigger: 'a.ex2trigger'}); /* スタイリング:アラート */ $('#ex3a').jqm({ trigger: '#ex3aTrigger', overlay: 30, overlayClass: 'whiteOverlay' }).jqDrag('.jqDrag'); $('input.jqmdX') .hover( function(){ $(this).addClass('jqmdXFocus'); }, function(){ $(this).removeClass('jqmdXFocus'); }) .focus( function(){ this.hideFocus=true; $(this).addClass('jqmdXFocus'); }) .blur( function(){ $(this).removeClass('jqmdXFocus'); }); /* スタイリング:ダイアログ */ var triggers = $('a.ex3bTrigger')[0]; $('#ex3b').jqm({ trigger: triggers, ajax: '/content/demo/sample_utf-8.txt', target: 'div.jqmAlertContent', overlay: 0 }); if($.browser.msie) { $('div.jqmAlert .jqmClose').hover( function(){ $(this).addClass('jqmCloseHover'); }, function(){ $(this).removeClass('jqmCloseHover');} ); } /* スタイリング:通知ウィンドウ */ $('#ex3c') .jqDrag('.jqDrag') .jqResize('.jqResize') .jqm({ trigger:'#ex3cTrigger', overlay: 0, onShow: function(h) { /* callback executed when a trigger click. Show notice */ h.w.css('opacity',0.92).slideDown(); }, onHide: function(h) { /* callback executed on window hide. Hide notice, overlay. */ h.w.slideUp("slow",function() { if(h.o) h.o.remove(); }); } }); }); </script> <link rel="stylesheet" type="text/css" href="/content/lib/jquery/jqModal.css" /> <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><a href='http://dev.iceburg.net/jquery/jqModal/'>jqModal</a> | 設置サンプル</h1> <!-- CODE --> <h2>デフォルト</h2> <p>ページ上のコンテンツをモーダルウィンドウに表示します。</p> <p><a href="#" class="jqModal">view</a></p> <div class="jqmWindow" id="dialog"> <a href="#" class="jqmClose">Close</a> <p>あいうえお</p> </div> <h2>Ajax</h2> <p>外部ファイルを読込んでウィンドウ内に表示します。</p> <p><a href="#" class="ex2trigger">view</a></p> <div class="jqmWindow" id="ex2"> Please wait... <img src="/content/img/loading.gif" alt="loading" /> </div> <h2>スタイリング</h2> <ul> <li> <p><strong>ダイアログ</strong> <a href="#" id="ex3aTrigger">view</a> (dialog)</p> <p>jqDnR.jsを使用した、ドラッグ&ドロップ可能なダイアログ。</p> <div id="ex3a" class="jqmDialog"> <div class="jqmdTL"> <div class="jqmdTR"> <div class="jqmdTC jqDrag">タイトル</div> </div> </div> <div class="jqmdBL"> <div class="jqmdBR"> <div class="jqmdBC"> <div class="jqmdMSG"> 簡単に装飾したウィンドウやダイアログを作成できます。 </div> </div> </div> </div> <input type="image" src="dialog/close.gif" class="jqmdX jqmClose" /> </div> </li> <li> <p><strong>アラート</strong> <a href="#" class="ex3bTrigger">view</a> (alert)</p> <p>jqDnR.js使用。外部ファイルを読込んでアラート内に表示します。</p> <div class="jqmAlert" id="ex3b"> <div id="ex3b" class="jqmAlertWindow"> <div class="jqmAlertTitle cf"> <h1>タイトル</h1><a href="#" class="jqmClose"><em>閉じる</em></a> </div> <div class="jqmAlertContent"> <p>Please wait... <img src="/content/img/loading.gif" alt="loading" /></p> </div> </div> </div> </li> <li> <p><strong>通知ウィンドウ</strong> <a href="#" id="ex3cTrigger">view</a> (notice)</p> <p>jqDnR.js使用した、ドラッグ&ドロップ可能な通知ウィンドウ。開閉時にスライドアニメーションします。</p> <div style="position: absolute; margin: -100px 0 0 100px;"> <div id="ex3c" class="jqmNotice"> <div class="jqmnTitle jqDrag"> <h1>お知らせ</h1> </div> <div class="jqmnContent"> <p>当サイトの新着情報は<a href='http://phpjavascriptroom.com/index.xml'>こちら</a></p> </div> <img src="/content/lib/jquery/jqmodal/notice/close_icon.png" alt="close" class="jqmClose" /> <img src="/content/lib/jquery/jqmodal/dialog/resize.gif" alt="resize" class="jqResize" /> </div> </div> </li> </ul> <!-- / CODE --> </body> </html>