Question

我正试图加载包含从数据库检索到的信息的引导程序模式。我正在使用AJAX在模态中获取结果。引导程序模式已正确加载，但未加载到页面中央，而是已加载到页面的右上角。我希望它位于页面的中心

我尝试在模式类中添加css属性，并在其他平台上搜索问题，但未找到任何内容。

点击此锚定标签后，我绑定了模态

<a href=""  onclick=" show(<?php echo $ids[$i] ?>)" class = 'fa fa-eye'        data-toggle="modal" data-target="#exampleModalLong"'></a>

这是ajax的代码

function show(id)       
             {              

                var xhr =  new XMLHttpRequest();
                xhr.open("GET" ,"findinfo.php?id="+id,true);

                xhr.send(null);
                xhr.onreadystatechange = function(){
                    if( (xhr.readyState == '4') && ( xhr.status == '200') )
                    {

                        document.getElementById("mbody").innerHTML = xhr.responseText;
                    }


                }

            }

这是我使用的模态

<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby=" exampleModalLongTitle" aria-hidden="true">
      <div class="modal-dialog" role="dialog">
       <div class="modal-content">
            <!-- modal header -->
             <div class="modal-header">
                 <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                 </button>
             </div>
             <!-- modal body -->
               <div class="modal-body" id = 'mbody'>

              </div>
              <!-- modal footer -->
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
              </div>
       </div>
  </div>
</div>

我想要引导程序模态位于页面中心，它被加载到页面的右上角。

图片显示了

Answer 1

尝试一下，

.modal.fade.show .modal-dialog{
    top: 50%;
    transform: translateY(-50%);
}

Answer 2

您在评论中说，您有一个包装容器标记：

<div class = 'container'> <div class = 'row'> <div class = col-md-12> Here is my modal... </div> </div> </div>

那就是问题所在。类“ col-md-12”使用css“ position：relative;”。和flexbox的东西。那么模态的“固定”位置可能会有一些警告。正如我在评论中所说，您应该阅读"How it Works"-part。

解决方案可能是：将模态直接放置在体内而没有任何包装容器。无论如何，这应该是首选方式。

希望它能帮助您，并致以最诚挚的问候

如何在页面中心获取我的引导模式

2 个答案: