0
私はドラッグ可能でなければならないモーダルのカスケードを持っているので、Bootstrap ModalとjQuery UIをドラッグ可能に実装しました。ui-draggableがChrome上のモーダルダイアログ内で正しく動作しない
しかし、私が使用したコードはInternet ExplorerとFirefoxでもうまく機能しますが、Chromeでは内部のモーダルがドラッグしようとするときついオフセットになります。
さらにデバッグすると、modal-dialogがposition: fixedを使用し、jQuery UI draggableがtop/leftに正の値を使用するため、内部モーダルの位置が正しく変更されませんでした。
でも、jQuery UI draggableによって生成されるtop/leftの値は、すべてのブラウザで同じですが、Chromeはそれを間違って位置づけます。
コード：
$('#Cad_Expen').draggable(
{
handle: '#Expen > .mod-header',
containment: 'window'
});
$('#Cad_Point').draggable(
{
handle: '#Point > .mod-header',
containment: 'window'
});#Cad_Expen {
width: 800px;
height: 500px;
left: calc(50% - 400px);
top: calc(50% - 250px);
}
#Cad_Point {
width: 600px;
height: 300px;
left: calc(50% - 300px);
top: calc(50% - 150px);
}
.modal-dialog {
width: 100%;
height: 100%;
margin: 0;
}
.modal {
overflow: visible !important;
}
/* irrelevant CSS */
.mod-header {
height: 30px;
background-color: #DBDBDB;
}
.mod-expen-body, .mod-point-body {
background-color: #F7F7F7;
border: 1px solid #DBDBDB;
}
.mod-expen-body {
height: 500px;
}
.mod-point-body {
height: 300px;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="Cad_Expen" class="modal fade in" style="display: block;">
<div id="Expen" class="modal-dialog">
<div class="mod-header"></div>
<div class="mod-expen-body"></div>
<div id="Cad_Point" class="modal fade in" style="display: block;">
<div id="Point" class="modal-dialog">
<div class="mod-header"></div>
<div class="mod-point-body"></div>
</div>
</div>
</div>
</div>あなたもCodePen上でそれを見つけることができます。
http://codepen.io/carvalho23lucas/full/jBJbLy/