引导模式在单击按钮时无法按预期工作答案

【问题标题】：bootstrap modal not working as expected on clicking on button引导模式在单击按钮时无法按预期工作
【发布时间】：2019-10-25 18:33:54
【问题描述】：

每当我单击按钮打开模态并且模态正在打开但背景滑块向下移动时，我都有一个 Bootstrap 模态，如图所示

  <div class="modal fade" id="location">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Select City</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <!-- Modal body -->
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-1"></div>
                    <div class="form-group col-sm-10">
                        <label>City:</label>
                        <!-- <input type="text" > -->
                        <select class="form-control" id="selCity" name="selCity">
                            <option value="">Select City</option>
                            <?php
                                $query="SELECT * FROM city";
                                $results=$con->query($query);
                                foreach ($results as $ic_city_name) {

                            ?>
                            <option value="<?php echo $ic_city_name["ic_city_name"];?>";?>
                                <?php echo $ic_city_name["ic_city_name"];?>
                            </option>
                            <?php
                            }
                            ?>
                        </select>
                    </div>
                    <div class="col-sm-1"></div>
                </div>
                <div class="row">
                    <div class="col-sm-1"></div>
                    <div class="form-group col-sm-10">
                        <label>Area:</label>
                        <input type="text" class="form-control" name="selAreaMain" id="selAreaMain" list="areaMain">
                        <datalist id="areaMain">

                        <?php
                            $query="SELECT * FROM infynow_area";
                            $results = $con->query($query);
                            foreach ($results as $ia_area) {
                        ?>
                        <option value="<?php echo $ia_area["ia_area"];?>";?>
                            <?php echo $ia_area["ia_area"];?>
                        </option>
                        <?php
                        }
                        ?>
                        </datalist>
                    </div>
                    <div class="col-sm-1"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal" id="txtSelect">Select</button>
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
    </div>
</div>

上面显示的是引导程序打开代码并获得如图所示的结果。[！

以上是引导程序或其他错误。如果有人知道这件事。

【问题讨论】：

兄弟你为什么删除答案？
能不能去掉样式试试style="position: relative; bottom:52px;"
没有发生和以前一样的情况。
好的，如果你把这个模态放在你的html代码中间，那么把它放在底部。也许就在body标签结束之前
看看这是否有帮助stackoverflow.com/questions/52669636/…

标签： html twitter-bootstrap

【解决方案1】：

您的模态框有一些在这种情况下不需要的样式。您可以删除它们并尝试

style="position: relative; bottom:52px;"

【讨论】：