CODEWITHSUNDEEP
blazorbootstrap-modal
Daniele Sartori
Daniele Sartori

Reputation: 1703

Positioning of bootstrap modal in blazor page

i am fairly new in web coding world so i ask sorry if there are some obvious error i am unaware of. I was challenging myself on using a modal inside a toy project i was working on, but i'm having some trouble

enter image description here

As you can see, my modal is not modal at all. It just appear under the grid.

@page "/"

<PageTitle>Index</PageTitle>

<div>
    <div>
        <h1 id="impListH">TestApp</h1> <button id="impListB" class="btn btn-primary" @onclick="@(() => { showModal = true; })" >Importa</button>
    </div>
    <br />
    <br />
    <DataGrid TItem="Employee" MySource="employees" Columns="columnDefinitions"></DataGrid>
</div>

@if (showModal)
{
    <div class="modal-dialog" tabindex="-1" role="dialog" style="display: initial;" id="myModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnes enim iucundum motum, quo sensus hilaretur.
                        <i>Quis istud possit, inquit, negare?</i>
                        <mark>Ego vero isti, inquam, permitto.</mark> Duo Reges: constructio interrete.
                    </p>
                    <FetchData />
                    <dl>
                        <dt><dfn>Stoici scilicet.</dfn></dt>
                        <dd>An hoc usque quaque, aliter in vita?</dd>
                        <dt><dfn>Erat enim Polemonis.</dfn></dt>
                        <dd>Quod cum accidisset ut alter alterum necopinato videremus, surrexit statim.</dd>
                    </dl>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary">Save changes</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
}

i followed this answer to build the model. I really don't understand what is wrong. Can you help me?

Upvotes: 2

Views: 1408

Answers (2)

olesakn
olesakn

Reputation: 206

Per Bootstrap's Modal Documentation

Your root div should use the class modal instead of modal-dialog. the following changes should fix your issue:

@if (showModal)
{
    <div class="modal" tabindex="-1" role="dialog" style="display: initial;" id="myModal">
        <div class="modal-dialog" role="document">

Upvotes: 2

Nb777
Nb777

Reputation: 2032

Wrap you div.modal-dialog with <div class="modal" tabindex="-1"> also I think that you have a double of div.modal-dialog

Upvotes: 2

Related Questions