iframeでjqueryのドラッグ可能なダイアログボックスを開きました。iframe 内では問題なく動作しますが、jquery ダイアログ ボックスを iframe の外にドラッグすることはできません。ダイアログ ボックスを iframe の外にドラッグしたい。どうすればこれを行うことができますか？
以下は、movable.php ファイルで使用したサンプル コードです。
<html>
<head>
<link href="http://www.jquerydemo.dailyfreecode.com/Styles/Site.css" rel="stylesheet" type="text/css" />
<link href="http://www.jquerydemo.dailyfreecode.com/Styles/css/sunny/jquery-ui-1.8.22.custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="Javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" language="Javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<style>
.ui-dialog
{
position:relative !important;
top:0px !important;
}
</style>
</head>
<body>
<a id="hlOpenMe" href="#">Click Me to Open Dialog Box</a>
<div id="dialog" title="My Dialog Title">
<p>This is My Dialog box Description/Content</p>
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#dialog").dialog({ autoOpen: false });
$("#hlOpenMe").click(
function () {
$("#dialog").dialog('open');
return false;
}
);
});
</script>
</body>
今私はdemo.phpページでiframeを呼び出しています。
<iframe src="movable.php" id="name" name="test" width="50%" height="50%">
</iframe>