Modal popup is stretched away from the original center

Question

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

Sachin Singh · 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 User · Answer

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.