シンプルで美しい JS ポップアップ ウィンドウ - 無料のドラッグ アンド ドロップ
-equiv="Content-Type" content="text/html; charset=utf-8">
シンプルで美しい JS ポップアップ ウィンドウ - 自由にドラッグ <br> <br><script type="text/javascript"> <BR>//作成者: zhao jinhan <BR>//日時: 2013 年 10 月 22 日<BR>//メール: xb_zjh@126.com <BR>functionrag(o,s) <BR>{ <BR>//drag(obj [,scroll]); /obj: オブジェクトまたはオブジェクト自体の ID; <BR>//scroll (オプション): ウィンドウのドラッグ時にオブジェクトがスライドするかどうか、デフォルトは no <BR><BR>if (typeof o == " string" ) o = document.getElementById(o); <BR>o.orig_x = parseInt(o.style.left) - document.body.scrollLeft; <br>o.orig_y = parseInt(o.style.top) - document.body.scrollTop; <br><BR>o.onmousedown = function(a) <BR>{ <BR>this.style.zIndex = 10000; >var d=document; <br>if(!a)a=window.event; <br>var x = a.clientX d.body.scrollLeft-o.offsetLeft; <BR>var y = a.clientY d. body.scrollTop-o.offsetTop; <BR><BR>d.ondragstart = "return false;" <BR>d.onselect = "document.selection.empty() ;" <BR><BR>if(o.setCapture) <br>o.setCapture(); <br>else if(window.captureEvents) <BR>window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); <BR> <br>d.onmousemove = function(a) <br>{ <BR>if(!a)a=window.event; <BR>o.style.left = a.clientX document.body.scrollLeft-x ; <BR>o.style.top = a.clientY document.body.scrollTop-y; <br>o.orig_x = parseInt(o.style.left) - document.body.scrollLeft; parseInt( o.style.top) - document.body.scrollTop; <br>} <BR><BR>d.onmouseup = function() <BR>{ <BR>if(o.releaseCapture) <BR>o。 releaseCapture( ); <BR>else if(window.captureEvents) <BR>d.onmousemove = null; >d .ondragstart = null; <br>d.onselect = null; <br>o.style.zIndex = o.orig_index ; <BR>} <BR>} <BR><BR>if (s) <BR>{ <BR>var orig_scroll = window.onscroll?window.onscroll:function (){}; function ( ) <BR>{ <BR>orig_scroll(); <BR>o.style.left = o.orig_x document.body.scrollLeft; <BR>o.style.top = o.orig_y document.body.scrollTop; <BR>} <BR>} <BR>} <BR><br>var title = 'プロンプトのタイトル'; <br>var message='プロンプトの内容'; <BR>var TrueEvent=''; CancelEvent= ''; <BR>var CloseEvent=''; <BR>関数 Dialogalert(title, message, TrueEvent, CancelEvent, CloseEvent) { <BR>$("#divBackground").removeClass("hidden"); 🎜> $("#divMaincontent").removeClass("hidden"); <BR><BR>$("#alertTitle").html(タイトル); <BR>$("#alertContent").html(メッセージ) ); <BR><BR>$("#btnSure").click(function () { <BR>$("#divBackground").addClass("hidden"); <br>$("#divMaincontent") .addClass ("hidden"); <br>$("#btnSure").unbind("click"); <BR>if (TrueEvent) { <BR>//確認後に URL にジャンプします <BR>window.location .href = TrueEvent; <BR><BR>}); //OK<BR><BR>$("#btnCancel").click(function () { <br>$("#divBackground") ).addClass("hidden"); <br>$("#divMaincontent").addClass("hidden"); <BR>$("#btnCancel").unbind("click"); CancelEvent) { <br>//キャンセル後のURLにジャンプ <br>window.location.href = CancelEvent; <BR>} <BR>});//キャンセル<BR><BR>$("#btnClose") .click (function () { <BR>$("#divBackground").addClass("hidden"); <BR>$("#divMaincontent").addClass("hidden"); <BR>$("# btnClose" ).unbind("click"); <br>if (CloseEvent) { <br>//閉じた後に URL にジャンプ <br>window.location.href = CloseEvent; <br>} <BR><BR>} ) ;// ://www.baidu.com/','http://www.icode100.com/','http://bbs.icode100.com/'); ></ script> <BR><style type="text/css"> <BR><BR>body, p { <BR>background: none 繰り返しスクロール 0 0 #FFFFFF; 333333; <BR>フォントサイズ: 12px; <BR>パディング: 0; <br>} <br>.left { float:left } <BR>.right { float:right } <BR>#divMaincontent { <BR>font-family: "Microsoft Yahei","宋体",Microsoft Yahei,Tahoma,Arial,sans-serif; <BR>font-size: 100 %; <BR>フォントの太さ: 通常; <BR> 垂直方向の配置: ベースライン; <BR>#divMaincontent { text-decoration:none; <br> .blackf1 { <br>クリア: 両方; <BR>フォントサイズ: 12 ピクセル; <br> 行の高さ: 12 ピクセル; <br> >カラー: #999999; <BR>.pm_main { <BR>ボーダー: 4px ソリッド rgba(0, 0, 0, 0.1); <BR>位置: 固定; 🎜>トップ: 40%; <BR>幅: 318px; <BR>} <br>.pm_tit1 { <br>背景: url("images/dialog_blue.gif") x スクロール 0 0 rgba(0, 0, 0, 0); <BR>色: #FFFFFF; <BR>行の高さ: 26px;テキストインデント: 16px; <BR>幅: 100%;<BR>.pm_tit1 a { <BR>background: url("images/pm_bg.png") リピートなしスクロール 0 -67px rgba(0, 0, 0, 0); <BR>カーソル: ポインタ; <BR>高さ: 20px; <BR>右マージン: 10px; <BR>幅: 20px; <BR>} <BR>.pm_tit1 a:hover { <BR>背景位置: 0 -90px; <BR>} <BR>.pm_con1 { <BR>背景: なし スクロールを繰り返す 0 0 #CCCCCC; <BR>最大高さ: 150px; <BR>オーバーフロー-y: 自動; <BR>パディング: 0 1px 1px; <BR>幅: 100%; <BR>} <BR>.pm_con2 { <BR>背景: なし スクロールを繰り返す 0 0 #FFFFFF; <BR>オーバーフロー: 非表示; <BR>パディング: 16px 0; <BR>幅: 100%; <BR>} <BR>.pm_con2 p { <BR>margin-left: 80px; <BR>パディング: 2px 0; <BR>テキスト整列: 左; <BR>} <BR>.pm_con2 p.fontcolorf3 { <BR>font-size: 14px; <BR>フォントの太さ: 太字; <BR>} <BR>.pm_btn1 a, .pm_btn1 a:link, .pm_btn1 a:visited, .pm_btn1 a:hover, .pm_btn1 a:active { <BR>background: url("images/pm_bg.png")繰り返しなしスクロール 0 0 rgba(0, 0, 0, 0); <BR>表示: インラインブロック; <BR>高さ: 28px; <BR>行の高さ: 28px; <BR>マージン: 3px 40px 0 0; <BR>text-align: 中央; <BR>幅: 53px; <BR>} <BR>.pm_btn1 a:hover { <BR>背景位置: 0 -35px; <BR>カラー: #333333; <BR>テキスト装飾: なし。 <BR>} <BR> <BR> <BR><本体> <BR><div class="pm_main hidden" id="divMaincontent"> <BR><div class="pm_tit1"><span class="left">提案情報<a class="right" id="btnClose" href="javascript:void( 0)"></script>
