Topic: how to center modal?

yeisonvelez11 free asked 3 years ago


I dont know how to center a modal, I dont find an example to center vertically and horizontally my modal

    <div mdbModal #registro="mdbModal" class="modal fade left" id="registro" tabindex="-1" role="dialog"
    aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content mascara">
        <div class="modal-header text-center">
            <!--<h4 class="modal-title w-100 font-weight-bold">Registro</h4>-->
            <i class="fa fa-user ml-1  fa-2x color_verde2_um wow rotateIn" aria-hidden="true"></i>
            <h4 class="text-center mb-3 color_verde2_um m-auto ">Registro</h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="registro.hide()">
            <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body mx-3">
            <p class="card-text">
                ¡Únete al lugar donde encontrarás centralizada la información de la <strong>Universidad de Manizales</strong>!
            </p>
        </div>
        <div class="text-center mb-4">
            <hr>
            <button class="btn degradado-um btn-lg z-depth-1a waves-light" mdbWavesEffect (click)="fn_submitForm(formRegistro)">Ingresar<i class="fas fa-sign-in-alt ml-2"></i></button>
        </div>
        </div>
    </div>
    </div>

Damian Gemza staff answered 3 years ago


Dear @yeisonvelez11

Your desired modal example is described in your documentation. Please take a look at this link.

Best Regards,

Damian


Nate free commented 1 year ago

@Damian Gemza Do you know how to center a dynamically generated modal? Because the modal-dialog line is generated in that case.

Edit: Nevermind, I found it here- it's supplied as an option parameter under class. You just add modal-dialog-center to the class option.

https://mdbootstrap.com/docs/angular/modals/basic/#a-dynamic-modal-options


misuk11 free commented 3 months ago

do you have an example of this ? Ive tried it but it doesnt work



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.5.1
  • Device: Web
  • Browser: chrome
  • OS: windows 10
  • Provided sample code: No
  • Provided link: No