How to get my bootstrap modal at the center of the page
I'm trying to load the bootstrap modal containing information retrieved from the database.
I'm fetching the results in the modal using AJAX .
The bootstrap modal is loaded correctly but not on the center of the page,it is loaded on the right corner of the page.
I want it to be on the center of the page
I've tried to add css properties on modal class and also search for the problem on different platform but didn't find anything.
After clicking this anchor tag I've bind the modal
<a href="" onclick=" show(<?php echo $ids[$i] ?>)" class = 'fa fa-eye' data-toggle="modal" data-target="#exampleModalLong"'></a>
This is the code for ajax
function show(id)
{
var xhr = new XMLHttpRequest();
xhr.open("GET" ,"findinfo.php?id="+id,true);
xhr.send(null);
xhr.onreadystatechange = function(){
if( (xhr.readyState == '4') && ( xhr.status == '200') )
{
document.getElementById("mbody").innerHTML = xhr.responseText;
}
}
}
here is the modal I've used
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby=" exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="dialog">
<div class="modal-content">
<!-- modal header -->
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!-- modal body -->
<div class="modal-body" id = 'mbody'>
</div>
<!-- modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
I want The bootstrap modal on the center of the page,it is loaded on the right corner of the page.
Image shows this
html css bootstrap-modal
|
show 2 more comments
I'm trying to load the bootstrap modal containing information retrieved from the database.
I'm fetching the results in the modal using AJAX .
The bootstrap modal is loaded correctly but not on the center of the page,it is loaded on the right corner of the page.
I want it to be on the center of the page
I've tried to add css properties on modal class and also search for the problem on different platform but didn't find anything.
After clicking this anchor tag I've bind the modal
<a href="" onclick=" show(<?php echo $ids[$i] ?>)" class = 'fa fa-eye' data-toggle="modal" data-target="#exampleModalLong"'></a>
This is the code for ajax
function show(id)
{
var xhr = new XMLHttpRequest();
xhr.open("GET" ,"findinfo.php?id="+id,true);
xhr.send(null);
xhr.onreadystatechange = function(){
if( (xhr.readyState == '4') && ( xhr.status == '200') )
{
document.getElementById("mbody").innerHTML = xhr.responseText;
}
}
}
here is the modal I've used
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby=" exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="dialog">
<div class="modal-content">
<!-- modal header -->
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!-- modal body -->
<div class="modal-body" id = 'mbody'>
</div>
<!-- modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
I want The bootstrap modal on the center of the page,it is loaded on the right corner of the page.
Image shows this
html css bootstrap-modal
Could you provide the wrapping HTML? Where you place the modal-html markup? Do you use the standard bootstrap css or a custom one (maybe than show us this as well).
– Stretau
Jan 3 at 15:08
Yeah I tried it with a container class and without that as well @Stretua.
– mehmood khan
Jan 3 at 15:11
Is your modal markup directly part of <body> or within an container? if in container, whats the css of that? Could you make a stackblitz example?
– Stretau
Jan 3 at 15:15
No , it's not directly part of the body, it is in container with no css.
– mehmood khan
Jan 3 at 15:26
What version of bootstrap you are using? v4? Could you share the html markup around your modal please? your wrapping container has no css-class or sth.? Try to use "Developer Tools" of your browser. Its always a good thing to check really used styles of your rendered code. My guess there is somewhere a "margin"-setting which overwrites the default of ".modal-dialog" class. Consider to check the linked articles in the "How it works"-part
– Stretau
Jan 4 at 7:46
|
show 2 more comments
I'm trying to load the bootstrap modal containing information retrieved from the database.
I'm fetching the results in the modal using AJAX .
The bootstrap modal is loaded correctly but not on the center of the page,it is loaded on the right corner of the page.
I want it to be on the center of the page
I've tried to add css properties on modal class and also search for the problem on different platform but didn't find anything.
After clicking this anchor tag I've bind the modal
<a href="" onclick=" show(<?php echo $ids[$i] ?>)" class = 'fa fa-eye' data-toggle="modal" data-target="#exampleModalLong"'></a>
This is the code for ajax
function show(id)
{
var xhr = new XMLHttpRequest();
xhr.open("GET" ,"findinfo.php?id="+id,true);
xhr.send(null);
xhr.onreadystatechange = function(){
if( (xhr.readyState == '4') && ( xhr.status == '200') )
{
document.getElementById("mbody").innerHTML = xhr.responseText;
}
}
}
here is the modal I've used
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby=" exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="dialog">
<div class="modal-content">
<!-- modal header -->
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!-- modal body -->
<div class="modal-body" id = 'mbody'>
</div>
<!-- modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
I want The bootstrap modal on the center of the page,it is loaded on the right corner of the page.
Image shows this
html css bootstrap-modal
I'm trying to load the bootstrap modal containing information retrieved from the database.
I'm fetching the results in the modal using AJAX .
The bootstrap modal is loaded correctly but not on the center of the page,it is loaded on the right corner of the page.
I want it to be on the center of the page
I've tried to add css properties on modal class and also search for the problem on different platform but didn't find anything.
After clicking this anchor tag I've bind the modal
<a href="" onclick=" show(<?php echo $ids[$i] ?>)" class = 'fa fa-eye' data-toggle="modal" data-target="#exampleModalLong"'></a>
This is the code for ajax
function show(id)
{
var xhr = new XMLHttpRequest();
xhr.open("GET" ,"findinfo.php?id="+id,true);
xhr.send(null);
xhr.onreadystatechange = function(){
if( (xhr.readyState == '4') && ( xhr.status == '200') )
{
document.getElementById("mbody").innerHTML = xhr.responseText;
}
}
}
here is the modal I've used
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby=" exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="dialog">
<div class="modal-content">
<!-- modal header -->
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!-- modal body -->
<div class="modal-body" id = 'mbody'>
</div>
<!-- modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
I want The bootstrap modal on the center of the page,it is loaded on the right corner of the page.
Image shows this
html css bootstrap-modal
html css bootstrap-modal
edited Jan 3 at 15:54
mehmood khan
asked Jan 3 at 15:04
mehmood khanmehmood khan
768
768
Could you provide the wrapping HTML? Where you place the modal-html markup? Do you use the standard bootstrap css or a custom one (maybe than show us this as well).
– Stretau
Jan 3 at 15:08
Yeah I tried it with a container class and without that as well @Stretua.
– mehmood khan
Jan 3 at 15:11
Is your modal markup directly part of <body> or within an container? if in container, whats the css of that? Could you make a stackblitz example?
– Stretau
Jan 3 at 15:15
No , it's not directly part of the body, it is in container with no css.
– mehmood khan
Jan 3 at 15:26
What version of bootstrap you are using? v4? Could you share the html markup around your modal please? your wrapping container has no css-class or sth.? Try to use "Developer Tools" of your browser. Its always a good thing to check really used styles of your rendered code. My guess there is somewhere a "margin"-setting which overwrites the default of ".modal-dialog" class. Consider to check the linked articles in the "How it works"-part
– Stretau
Jan 4 at 7:46
|
show 2 more comments
Could you provide the wrapping HTML? Where you place the modal-html markup? Do you use the standard bootstrap css or a custom one (maybe than show us this as well).
– Stretau
Jan 3 at 15:08
Yeah I tried it with a container class and without that as well @Stretua.
– mehmood khan
Jan 3 at 15:11
Is your modal markup directly part of <body> or within an container? if in container, whats the css of that? Could you make a stackblitz example?
– Stretau
Jan 3 at 15:15
No , it's not directly part of the body, it is in container with no css.
– mehmood khan
Jan 3 at 15:26
What version of bootstrap you are using? v4? Could you share the html markup around your modal please? your wrapping container has no css-class or sth.? Try to use "Developer Tools" of your browser. Its always a good thing to check really used styles of your rendered code. My guess there is somewhere a "margin"-setting which overwrites the default of ".modal-dialog" class. Consider to check the linked articles in the "How it works"-part
– Stretau
Jan 4 at 7:46
Could you provide the wrapping HTML? Where you place the modal-html markup? Do you use the standard bootstrap css or a custom one (maybe than show us this as well).
– Stretau
Jan 3 at 15:08
Could you provide the wrapping HTML? Where you place the modal-html markup? Do you use the standard bootstrap css or a custom one (maybe than show us this as well).
– Stretau
Jan 3 at 15:08
Yeah I tried it with a container class and without that as well @Stretua.
– mehmood khan
Jan 3 at 15:11
Yeah I tried it with a container class and without that as well @Stretua.
– mehmood khan
Jan 3 at 15:11
Is your modal markup directly part of <body> or within an container? if in container, whats the css of that? Could you make a stackblitz example?
– Stretau
Jan 3 at 15:15
Is your modal markup directly part of <body> or within an container? if in container, whats the css of that? Could you make a stackblitz example?
– Stretau
Jan 3 at 15:15
No , it's not directly part of the body, it is in container with no css.
– mehmood khan
Jan 3 at 15:26
No , it's not directly part of the body, it is in container with no css.
– mehmood khan
Jan 3 at 15:26
What version of bootstrap you are using? v4? Could you share the html markup around your modal please? your wrapping container has no css-class or sth.? Try to use "Developer Tools" of your browser. Its always a good thing to check really used styles of your rendered code. My guess there is somewhere a "margin"-setting which overwrites the default of ".modal-dialog" class. Consider to check the linked articles in the "How it works"-part
– Stretau
Jan 4 at 7:46
What version of bootstrap you are using? v4? Could you share the html markup around your modal please? your wrapping container has no css-class or sth.? Try to use "Developer Tools" of your browser. Its always a good thing to check really used styles of your rendered code. My guess there is somewhere a "margin"-setting which overwrites the default of ".modal-dialog" class. Consider to check the linked articles in the "How it works"-part
– Stretau
Jan 4 at 7:46
|
show 2 more comments
2 Answers
2
active
oldest
votes
Try this,
.modal.fade.show .modal-dialog{
top: 50%;
transform: translateY(-50%);
}
Still same problem !!!
– mehmood khan
Jan 3 at 15:13
it is working fine. check this plunker plnkr.co/edit/gxCS2V?p=preview
– Anji
Jan 3 at 15:43
Check the post , I've updated it, given is the picture of the modal showing just at the right corner.
– mehmood khan
Jan 3 at 15:56
@mehmoodkhan, can you please create a plunker.
– Anji
Jan 4 at 6:08
add a comment |
You said in your comment, you have a wrapping container markup:
<div class = 'container'> <div class = 'row'> <div class = col-md-12> Here is my modal... </div> </div> </div>
And thats the problem. The class "col-md-12" uses css "position: relative;" and flexbox stuff. then the "fixed"-position of the modal maybe have some caveats. As I said in my comment you should read the "How it Works"-part.
Solution might be: Place your modal directly within body without any wrapping containers. This should be the preferred way anyhow.
Hope it helps & best regards
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54024876%2fhow-to-get-my-bootstrap-modal-at-the-center-of-the-page%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Try this,
.modal.fade.show .modal-dialog{
top: 50%;
transform: translateY(-50%);
}
Still same problem !!!
– mehmood khan
Jan 3 at 15:13
it is working fine. check this plunker plnkr.co/edit/gxCS2V?p=preview
– Anji
Jan 3 at 15:43
Check the post , I've updated it, given is the picture of the modal showing just at the right corner.
– mehmood khan
Jan 3 at 15:56
@mehmoodkhan, can you please create a plunker.
– Anji
Jan 4 at 6:08
add a comment |
Try this,
.modal.fade.show .modal-dialog{
top: 50%;
transform: translateY(-50%);
}
Still same problem !!!
– mehmood khan
Jan 3 at 15:13
it is working fine. check this plunker plnkr.co/edit/gxCS2V?p=preview
– Anji
Jan 3 at 15:43
Check the post , I've updated it, given is the picture of the modal showing just at the right corner.
– mehmood khan
Jan 3 at 15:56
@mehmoodkhan, can you please create a plunker.
– Anji
Jan 4 at 6:08
add a comment |
Try this,
.modal.fade.show .modal-dialog{
top: 50%;
transform: translateY(-50%);
}
Try this,
.modal.fade.show .modal-dialog{
top: 50%;
transform: translateY(-50%);
}
answered Jan 3 at 15:10
AnjiAnji
18112
18112
Still same problem !!!
– mehmood khan
Jan 3 at 15:13
it is working fine. check this plunker plnkr.co/edit/gxCS2V?p=preview
– Anji
Jan 3 at 15:43
Check the post , I've updated it, given is the picture of the modal showing just at the right corner.
– mehmood khan
Jan 3 at 15:56
@mehmoodkhan, can you please create a plunker.
– Anji
Jan 4 at 6:08
add a comment |
Still same problem !!!
– mehmood khan
Jan 3 at 15:13
it is working fine. check this plunker plnkr.co/edit/gxCS2V?p=preview
– Anji
Jan 3 at 15:43
Check the post , I've updated it, given is the picture of the modal showing just at the right corner.
– mehmood khan
Jan 3 at 15:56
@mehmoodkhan, can you please create a plunker.
– Anji
Jan 4 at 6:08
Still same problem !!!
– mehmood khan
Jan 3 at 15:13
Still same problem !!!
– mehmood khan
Jan 3 at 15:13
it is working fine. check this plunker plnkr.co/edit/gxCS2V?p=preview
– Anji
Jan 3 at 15:43
it is working fine. check this plunker plnkr.co/edit/gxCS2V?p=preview
– Anji
Jan 3 at 15:43
Check the post , I've updated it, given is the picture of the modal showing just at the right corner.
– mehmood khan
Jan 3 at 15:56
Check the post , I've updated it, given is the picture of the modal showing just at the right corner.
– mehmood khan
Jan 3 at 15:56
@mehmoodkhan, can you please create a plunker.
– Anji
Jan 4 at 6:08
@mehmoodkhan, can you please create a plunker.
– Anji
Jan 4 at 6:08
add a comment |
You said in your comment, you have a wrapping container markup:
<div class = 'container'> <div class = 'row'> <div class = col-md-12> Here is my modal... </div> </div> </div>
And thats the problem. The class "col-md-12" uses css "position: relative;" and flexbox stuff. then the "fixed"-position of the modal maybe have some caveats. As I said in my comment you should read the "How it Works"-part.
Solution might be: Place your modal directly within body without any wrapping containers. This should be the preferred way anyhow.
Hope it helps & best regards
add a comment |
You said in your comment, you have a wrapping container markup:
<div class = 'container'> <div class = 'row'> <div class = col-md-12> Here is my modal... </div> </div> </div>
And thats the problem. The class "col-md-12" uses css "position: relative;" and flexbox stuff. then the "fixed"-position of the modal maybe have some caveats. As I said in my comment you should read the "How it Works"-part.
Solution might be: Place your modal directly within body without any wrapping containers. This should be the preferred way anyhow.
Hope it helps & best regards
add a comment |
You said in your comment, you have a wrapping container markup:
<div class = 'container'> <div class = 'row'> <div class = col-md-12> Here is my modal... </div> </div> </div>
And thats the problem. The class "col-md-12" uses css "position: relative;" and flexbox stuff. then the "fixed"-position of the modal maybe have some caveats. As I said in my comment you should read the "How it Works"-part.
Solution might be: Place your modal directly within body without any wrapping containers. This should be the preferred way anyhow.
Hope it helps & best regards
You said in your comment, you have a wrapping container markup:
<div class = 'container'> <div class = 'row'> <div class = col-md-12> Here is my modal... </div> </div> </div>
And thats the problem. The class "col-md-12" uses css "position: relative;" and flexbox stuff. then the "fixed"-position of the modal maybe have some caveats. As I said in my comment you should read the "How it Works"-part.
Solution might be: Place your modal directly within body without any wrapping containers. This should be the preferred way anyhow.
Hope it helps & best regards
answered Jan 4 at 15:24
StretauStretau
938
938
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54024876%2fhow-to-get-my-bootstrap-modal-at-the-center-of-the-page%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Could you provide the wrapping HTML? Where you place the modal-html markup? Do you use the standard bootstrap css or a custom one (maybe than show us this as well).
– Stretau
Jan 3 at 15:08
Yeah I tried it with a container class and without that as well @Stretua.
– mehmood khan
Jan 3 at 15:11
Is your modal markup directly part of <body> or within an container? if in container, whats the css of that? Could you make a stackblitz example?
– Stretau
Jan 3 at 15:15
No , it's not directly part of the body, it is in container with no css.
– mehmood khan
Jan 3 at 15:26
What version of bootstrap you are using? v4? Could you share the html markup around your modal please? your wrapping container has no css-class or sth.? Try to use "Developer Tools" of your browser. Its always a good thing to check really used styles of your rendered code. My guess there is somewhere a "margin"-setting which overwrites the default of ".modal-dialog" class. Consider to check the linked articles in the "How it works"-part
– Stretau
Jan 4 at 7:46