Twitter Bootstrap Question posted in

Twitter Bootstrap Modal not appearing inside user view

I have a modal with dynamically generated content called #confirm, with no CSS modification as of the original Bootstrap 3 modal.
When I call $(“#confirm”).modal() it appears in a absolute position, always on the top of the page, not appearing for the user if the page is scrolled down.

That’s the modal HTML:

<div id="confirm" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header"></div>
            <div class="modal-body"></div>
            <div class="modal-footer">
                <button type="button" data-dismiss="modal" class="btn btn-primary" id="moveConfirm">Add</button>
                <button type="button" data-dismiss="modal" class="btn">Cancel</button>
            </div>
        </div>
    </div>
</div>

The calling of the modal is made like this:

$('#confirm').modal({ backdrop: 'static', keyboard: false })
            .one('click', '#moveConfirm', function() {
                moveCard(card);
            });

As I said there is no CSS modification (so the .modal class is in fixed position), I do not know if this could mess this up but I have those CSS modification on the html and body elements:

html {
    height: 100%;
}
html, body {
    min-height: 100%;
}
body {
    font-size: 1.5em;
    -moz-transform: scale(1, 1); /* Moz-browsers */
    zoom: 1; /* Other non-webkit browsers */
    zoom: 120%; /* Webkit browsers */
}

So, why isn’t the modal appearing inside the user’s screen always?

Edit

The page has dynamic content as well, in a div.cards, and I noticed none of this div’s parents are following it’s dynamic height. But if I set 

.modal-dialog {
    top: 50%;
}

or any other percent, the modal appear to follow the real size of the page, not the one dictated by the window height. So I don’t know if the height not increasing could be causing this.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Ok I got a way around it.
    Using the method Abdelhakeem Osama referenced I changed the value passed to the css function (which changes the margin-top) to equals the scrollTop of the document, instead of the height of the window.
    So my reposition function looks something like this:

    function reposition() {
    var modal = $(this),
        dialog = modal.find('.modal-dialog');
    modal.css('display', 'block');
    var top = $(document).scrollTop();
    dialog.css("margin-top", Math.max(0, top+15));
}

    The +15 is there just so the modal isn't too close to the top of the user's screen, but can be modified to your need.


  2. 0

    I think this might help: https://www.abeautifulsite.net/vertically-centering-bootstrap-modals

    It defines a function to position the modal vertically to the center of the window and creates two event handlers to call that function whenever the modal is shown or the window is resized.

    You may also try to tinker around your CSS styling rules on the html and body elements to find out whether it is these modifications that are causing the problem or not.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search