bootstrap modal not working as expected on clicking on button

Question

I have a Bootstrap modal whenever I click on button to open a Modal and modal is opening but background slider moving to down as shown in image

  <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>

Above shown is bootstrap open code and getting a result like shown in images.[!

Above is error in bootstrap or something else. If anyone know about this.

Answer 1

Your modal has some styles which are not needed in this scenario. You can remove them and try

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