Modal popup is stretched away from the original center

Guest User

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">Peoplebutton>
<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 peopleh1>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×span>
button>
div>
div>

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Sachin Singh5y ago
Accepted answer
even though bootstrap is a css and js framework but sometimes you need extra css.
copy below css and modal in your page.
class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal

class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    class="vertical-alignment-helper">
        class="modal-dialog vertical-align-center">
            class="modal-content">
                class="modal-header">
                    "button" class="close" data-dismiss="modal">"true">×class="sr-only">Close


                     class="modal-title" id="myModalLabel">Modal title
class="modal-body">...

class="modal-footer">

"button" class="btn btn-default" data-dismiss="modal">Close

"button" class="btn btn-primary">Save changes

.vertical-alignment-helper {

display:table;

height: 100%;

width: 100%;

}

.vertical-align-center {

/* To center vertically */

display: table-cell;

vertical-align: middle;

}

.modal-content {

/* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */

width:inherit;

height:inherit;

/* To center horizontally */

margin: 0 auto;

}

Guest User5y ago

Sachin the code works fine, how if i am closing the modal popup, it must close and _layout.cshtml must be clear to me its blur. Let me share the screen. It forces me to refresh the web page every time, its not very good.