How to get my bootstrap modal at the center of the page












1















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">&times;</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



enter image description here










share|improve this question

























  • 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


















1















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">&times;</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



enter image description here










share|improve this question

























  • 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
















1












1








1








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">&times;</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



enter image description here










share|improve this question
















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">&times;</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



enter image description here







html css bootstrap-modal






share|improve this question















share|improve this question













share|improve this question




share|improve this question








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





















  • 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














2 Answers
2






active

oldest

votes


















0














Try this,



.modal.fade.show .modal-dialog{
top: 50%;
transform: translateY(-50%);
}





share|improve this answer
























  • 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



















0














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






share|improve this answer
























    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
    });


    }
    });














    draft saved

    draft discarded


















    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









    0














    Try this,



    .modal.fade.show .modal-dialog{
    top: 50%;
    transform: translateY(-50%);
    }





    share|improve this answer
























    • 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
















    0














    Try this,



    .modal.fade.show .modal-dialog{
    top: 50%;
    transform: translateY(-50%);
    }





    share|improve this answer
























    • 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














    0












    0








    0







    Try this,



    .modal.fade.show .modal-dialog{
    top: 50%;
    transform: translateY(-50%);
    }





    share|improve this answer













    Try this,



    .modal.fade.show .modal-dialog{
    top: 50%;
    transform: translateY(-50%);
    }






    share|improve this answer












    share|improve this answer



    share|improve this answer










    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



















    • 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













    0














    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






    share|improve this answer




























      0














      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






      share|improve this answer


























        0












        0








        0







        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






        share|improve this answer













        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







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Jan 4 at 15:24









        StretauStretau

        938




        938






























            draft saved

            draft discarded




















































            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.




            draft saved


            draft discarded














            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





















































            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







            Popular posts from this blog

            Monofisismo

            Angular Downloading a file using contenturl with Basic Authentication

            Olmecas