0
jQuery UIダイアログと位置スクリプトを使用して、トリガーリンクを基準にしたjQuery UIベースのダイアログを配置できますか方法）？私が見つけることができる実行可能なデモはありません。そして、ここで頻繁に参照されるJensbitsメソッドは、私がサポートしなければならないIE8で崩壊するようです。ヘルプ、フラストレーション：jQuery UIダイアログ+位置を使用してトリガーに相対的なダイアログを配置する
コーディング同僚が、これははるかにJavaScriptで以下含まれていますが、始めてコメントアウトされた部分のみのダイアログではなく、ダイアログ自体の中コンテンツを相殺し、いないようだ「varがオフセット」私を得ていましたボタンのすぐ下にダイアログを配置するのに役立ちます。図に示すように、ダイアログにはデフォルトのページセンターが読み込まれます。
本当にありがとうございます。ありがとうございました！ --cg
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<!-- YUI3 reset only: -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?3.3.0/build/cssreset/reset-min.css">
<!-- JQuery CDN -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<!-- JQuery UI CDN -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<!-- JQuery UI scripts -->
<script type="text/javascript" src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="http://jqueryui.com/ui/jquery.ui.dialog.js"></script>
<style media="screen" type="text/css">
<!--
/* styles for demo purposes only, do not copy */
body{width:97%;margin:0 1.5%;font:13px/1.231 'Arial Unicode MS',Arial,Verdana,sans-serif !important}
strong{font-weight:bold}
a{color:#034ea2}
a:hover{color:#ff7600}
p{margin:0 0 1em}
#page{min-width:780px;max-width:1260px;margin:12px auto}
/* end demo styles */
/* dialog base */
.dialog.ui-dialog{overflow:hidden;border:1px solid #a2aaaf;-moz-box-shadow:0px 1px 3px #7c888f;-webkit-box-shadow:0px 1px 3px #7c888f;box-shadow:0px 1px 3px #a2aaaf;background:#ffffff}
.dialog .ui-dialog-titlebar{margin-bottom:6px;padding:4px 6px;border-bottom:1px solid #dadddf;background:#eceeef;font-size:11px;color:#455560}
.dialog .ui-dialog-title-dialog{float:left}
.dialog .ui-dialog-titlebar-close
{float:right;width:17px;height:17px;position:relative;top:-1px;text-indent:-9999px;background:orange}
.dialog .ui-dialog-titlebar-close:hover{background-position:0 -30px}
.dialog .ui-dialog-content{padding:4px 10px 8px}
-->
</style>
</head>
<body>
<div id="page">
<!-- dialog trigger -->
<button id="opendialog01">Open dialog</button>
</div>
<!-- dialog -->
<div class="dialog" id="dialog01" title="Test dialog">
<p>[dialog content]</p>
</div>
<!-- initialize dialog -->
<script type="text/javascript">
<!--
$.fx.speeds._default = 100;
$(function() {
$(".dialog").dialog({
autoOpen: false,
show: "blind",
hide: "blind",
width: 400,
modal: false,
draggable: false,
resizable: false,
dialogClass: "dialog"
});
var showDialog = function (e, $trigger, $dialog) {
e.preventDefault();
/*
var offset = $trigger.offset();
$dialog.position({
of: $trigger,
my: "left top",
at: "left bottom"
});
*/
$dialog.dialog("open");
return false;
};
$("#opendialog01").click(function(e) {
return showDialog(e, $(this), $("#dialog01"));
});
});
-->
</script>
</body>
</html>
なぜUI jsを2回埋め込みますか？ CDNからの小型パッケージにはすでにコア、位置、ダイアログなどが含まれています。 – ThiefMaster