Modal popup is stretched away from the original center

Question

Hi Team

 

I need some help to prevent my popup modal form, when its clicked it stretched far away from the original layout and makes it difficult to see other controls. Let me share my front end code.

                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">People</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h1 class="modal-title" id="exampleModalLabel">Add people</h1>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">×</span>
                                </button>
                            </div>
</div>