Entire and centralized Modal Bootstrap

Asked

Viewed 1,897 times

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 Modal on the screen without getting cut? Follow 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>

Imagery:

inserir a descrição da imagem aqui

html css twitter-bootstrap modal

1 answer

1

Bootstrap modals have been designed to overlay all document content <body> in order to be able to scroll its contents.

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

Documentation:

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

<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 are launching your modal into an element with a fixed position or some rule of your css is preventing Bootstrap modal settings from being applied.

Browser other questions tagged html css twitter-bootstrap modal

You are not signed in. Login or sign up in order to post.