时间戳

首页 > 解决方案 > 如何使用 div id 动态移动/定位模态？

javascript - 如何使用 div id 动态移动/定位模态？

问题描述

我已经使用了几个步骤，比如绝对 - 相对位置，但对我没有任何作用，而且 div 必须通过背景剩余元素突出显示

HTML

<!-- Modal -->
    <div class="modal fade in" id="myModal" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">

                    <h4 class="modal-title" id="title1"></h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <p>Some text in the modal.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default prevBtn">Previous</button>
                    <button type="button" class="btn btn-default skipBtn" data-dismiss="modal">Skip</button>
                    <button type="button" class="btn btn-default nextBtn">Next</button>
                </div>
            </div>

        </div>
        <div class="modal-arrow"></div>
    </div>

CSS

.modal-dialog {
    position: absolute;
    top: 400px;
    right: 100px;
    bottom: 0;
    left: 0;
    z-index: 10040;
    overflow: auto;
    overflow-y: auto;
}
.relative1{
   position:relative;
}

.btn-default {
    color: black;
}


.modal,
.modal-backdrop {
    position: absolute !important;
}

.modal-backdrop.fade {
    opacity: 0;
}




.modal-backdrop.show {
    opacity: 0.5;
}

使用 JS 调用模态

这里模态仅显示在屏幕中心，它必须与 div 相邻。

标签： javascripthtmlcss

解决方案

使用 css，添加/更改它

#myModal .modal-dialog {
  top: 50px;
  right: 800px;
}

或使用 Javascript，将其添加到模态下方的某处

var myModal = document.querySelector("#myModal .modal-dialog");
myModal.style.top = "50px";
myModal.style.right = "80px";

推荐阅读