代码之家 › 专栏 › 技术社区 › RGriffiths

在除Safari以外的所有浏览器中打开模式

bootstrap-modal css html

-1

RGriffiths · 技术社区 · 7 年前

我有一个页面,其中有一个浮动的、可拖动的模式,允许我在模式打开时访问背景。除Safari外,以下功能适用于所有浏览器。有什么想法吗?下面的小提琴在狩猎中失败了。

CSS

#myModal {
  position: relative;
}

.modal-dialog {
  position: fixed;
  width: 50%;
  margin: 0;
  padding: 10px;
}

HTML

<button id="openModal">Show Modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">Draggable Modal</h4>
      </div>
      <div class="modal-body">
        Modal Body
      </div>
      <div class="modal-footer">
        <button class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

脚本

$('#openModal').click(function() {
  if (!($('.modal.in').length)) {
    $('.modal-dialog').css({
      top: 0,
      left: 0
    });
  }
  $('#myModal').modal({
    backdrop: false,
    show: true
  });

  $('.modal-dialog').draggable({
    handle: ".modal-header"
  });
});

https://jsfiddle.net/7vrhLk40/

1 回复 | 直到 7 年前

hawkstrider 7 年前

您需要从mymodal元素中删除相对位置。

$('#openModal').click(function() {
  if (!($('.modal.in').length)) {
    $('.modal-dialog').css({
      top: 0,
      left: 0
    });
  }
  $('#myModal').modal({
    backdrop: false,
    show: true
  });

  $('.modal-dialog').draggable({
    handle: ".modal-header"
  });
});

.modal-dialog {
  position: fixed;
  width: 50%;
  margin: 0;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<button id="openModal">Show Modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">Draggable Modal</h4>
      </div>
      <div class="modal-body">
        Modal Body
      </div>
      <div class="modal-footer">
        <button class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>