首页 > 解决方案 > 始终在其正常固定位置打开可拖动的 Bootstrap 模态

问题描述

我有一个可拖动并在设定位置打开的 Bootstrap 模式。我遇到的问题是,如果模态移动到另一个位置并在下次打开模态时关闭,它的位置与关闭时的位置相同,而不是处于正常的固定位置。正常位置是屏幕中心。

我需要添加什么才能使模态始终在其固定的正常位置打开?

模型

<div id="open_legend_modal" class="modal fade" data-keyboard="false" data-backdrop="false" style="z-index:112">
  <div class="modal-legend" modal-ku style=" max-height:85%;  margin-top: 60px; margin-bottom:50px;" modal-lg>
    <div class="modal-content-search">
      <div class="modal-header-help">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <div class="modal-title-current-signage" id="HideTitle" style="cursor:move">Legend </div>
      </div>
      <div class="modal-body-legend">
    <li class="RoomBooked">
      <div class="LegendActiveText">Room booked (Conference display only)</div>
    </li>
    <li class="LegendOffline">
      <div class="LegendOfflineText">Offline</div>
    </li>
    <li class="LegendOverride">
      <div class="LegendOverrideText">Override (Conference display only)</div>
    </li>
    <li class="LegendSignage">
      <div class="LegendSignageText">Signage</div>
    </li>
      </div>
      <div class="footer_search_buttons">
    <div id="foot-button-margin-help">
      <button id="CurrentHelpcancelform" type="button" class="btn btn-secondary-edit btn-xs" data-dismiss="modal">Close</button>
    </div>
      </div>
    </div>
  </div>
</div>

脚本

$(document).on('click','#open_legend', function(e){
   $('#open_legend_modal').modal('show');
   $('.modal-legend').draggable({
      "handle":".modal-header-help"
   });
});

标签: jquerybootstrap-modal

解决方案


推荐阅读