Bootstrap Modal integer and centered on the page

Question

Bootstrap Modal integer and centered on the page

Navigation

#1 by (1 votes)

1

I put Modal Bootstrap in my template as a test to display messages on the screen but it appears cut in the corner of the screen. How to adjust and center the Modal on the screen without being cut? Here is the code:

<asp:TemplateField HeaderText="TELEFONE">
    <ItemTemplate>

        <!-- Trigger the modal with a button -->
        <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

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

                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Modal Header</h4>
                    </div>
                    <div class="modal-body">
                        <p>Some text in the modal.</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-    dismiss="modal">Close</button>
                    </div>
                </div>  
            </div>
        </div>

    </ItemTemplate>
</asp:TemplateField>

Image :

html css twitter-bootstrap modal

asked by anonymous 25.12.2017 / 15:34

1 answer

Slide show overlapping menu Responsive image mapping

score 1 · Answer 1

Bootstrap Modes were designed to overlap the entire contents of the <body> document in order to be able to scroll through its contents.

Bootstrap does not support modal "nesting" and its documentation describes that the user will experience rendering problems if they are used within an element with position: fixed ... for all purposes it is recommended to place your modal HTML in a top-level position to avoid possible interference from other elements.

Documentation:

The example below demonstrates that both a modal at a higher level and within a container or column take up all the space in the <body> document:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>




<section id="full-modal-example" class="modal fade" tabindex="-1" role="dialog">
    <div  class="modal-dialog">
        <div class="modal-content rounded-0">
            <div class="modal-header">
                <h5 class="modal-title">Title</h5>
                <button type="button" class="close cp" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <span class="icol">Hello World!</span>
                </div>
            </div>
        </div>
    </div>
</section>


<section class="container">
    <div class="col-5 offset-7">
        <section id="modal-in-column" class="modal fade" tabindex="-1" role="dialog">
            <div  class="modal-dialog">
                <div class="modal-content rounded-0">
                    <div class="modal-header">
                        <h5 class="modal-title">Title</h5>
                        <button type="button" class="close cp" data-dismiss="modal">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <span class="icol">Hello World2!</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</section>



<button type="button" data-toggle="modal" data-target="#full-modal-example" class="btn btn-info">Full Modal</button>


<button type="button" data-toggle="modal" data-target="#modal-in-column" class="btn btn-info">Modal in Column</button>


<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.bundle.min.js"></script>

Most likely you're casting your modal to an element with a fixed position or some rule of your css is preventing Bootstrap's modal settings from being applied.