Question

我有一系列需要可拖动的模态，所以我使用Bootstrap Modal和jQuery UI可拖动实现它。

但是，我使用的代码在Internet Explorer和Firefox上工作得很好，但在Chrome中，当您尝试拖动时，内部模态会出现毛刺偏移。

进一步调试使我将错误与modal-dialog使用position: fixed的事实联系起来，而jQuery UI draggable使用top/left的正值，从而错误地改变了内部模态的位置。

但是，jQuery UI draggable生成的top / left值对于所有浏览器都是相同的，但只是Chrome定位错误。

代码：

＆＃13;

$('#Cad_Expen').draggable(
  { 
    handle: '#Expen > .mod-header', 
    containment: 'window'
  });

$('#Cad_Point').draggable(
  {
    handle: '#Point > .mod-header',
    containment: 'window' 
  });

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

您也可以在CodePen上找到它：
http://codepen.io/carvalho23lucas/full/jBJbLy/

Answer 1

我发现了问题，导致错误的是transform引导程序.modal.in .modal-dialog。

要解决此问题，只需将其放入您网站的css文件中：

.modal.in .modal-dialog {
  -webkit-transform: none !important;
  -moz-transform: none !important;
  -ms-transform: none !important;
  -o-transform: none !important;
  transform: none !important;
}

ui-draggable在Chrome上的模态对话框中无法正常工作

1 个答案: