CODEWITHSUNDEEP
javascriptcsstwitter-bootstrap
Caverman
Caverman

Reputation: 3707

Not able to get Bootstrap Modal to center with some JavaScript

I'm working on two different things with a Bootstrap Modal. The first is to dyanamically load them from an MVC partial view. That part seems to be working. Now I'm trying to get the Modal to center on the page.

I'm working off of this example but can't seem to get it to work. https://www.abeautifulsite.net/vertically-centering-bootstrap-modals

I changed the name of dialog id in the JavaScript to ".modal-container" so that it should find my modal. Other than that I don't see anything else I would need to change. I've looked at the F12 Dev Tools and I don't see any errors.

Index.cshtml

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Content/Site.css" rel="stylesheet" />
</head>
<body>
    <div> 
        <div class="container">
            @Html.ActionLink("Test Modal ", "TestModal", "Test", null, new { @class = "modal-link btn btn-warning" })
        </div>
    </div>

    <div id="modal-container" class="modal fade" role="dialog">
        <div class="modal-content">
        </div>
    </div>

    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script src="~/Scripts/modernizr-2.6.2.js"></script>

    <script type="text/javascript">

        //****  Bootstrap Modal - used with Partial Views  ***********************
        $(function () {
            // Attach modal-container bootstrap attributes to links with .modal-link class.
            // when a link is clicked with these attributes, bootstrap will display the href content in a modal dialog.
            $('body').on('click', '.modal-link', function (e) {
                e.preventDefault();
                $(this).attr('data-target', '#modal-container');
                $(this).attr('data-toggle', 'modal');
            });

            // Attach listener to .modal-close-btn's so that when the button is pressed the modal dialog disappears
            $('body').on('click', '.modal-close-btn', function () {
                $('#modal-container').modal('hide');
            });

            //clear modal cache, so that new content can be loaded
            $('#modal-container').on('hidden.bs.modal', function () {
                $(this).removeData('bs.modal');
            });

            $('#CancelModal').on('click', function () {
                return false;
            });
        });

        /**
        * Vertically center Bootstrap 3 modals so they aren't always stuck at the top
        */
        $(function () {

            function reposition() {

                var modal = $(this),
                    dialog = modal.find('.modal-container');

                modal.css('display', 'block');

                // Dividing by two centers the modal exactly, but dividing by three 
                // or four works better for larger screens.
                dialog.css("margin-top", Math.max(0, ($(window).height() - dialog.height()) / 2));

            }

            // Reposition when a modal is shown
            $('.modal').on('show.bs.modal', reposition);

            // Reposition when the window is resized
            $(window).on('resize', function () {
                $('.modal:visible').each(reposition);
            });

        });
    </script>

</body>
</html>

Controller

public class TestController : Controller
    {
        // GET: Test
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult TestModal()
        {
            return PartialView("_TestModal");
        }
    }

_TestModal.cshtml

<div class="modal-body">
    <h4>
        Are you sure you want to delete this cost center from all clocks in the  group?
    </h4>

    @using (Html.BeginForm("Lyubomir", "Home", FormMethod.Post))
    {
        <div class="row">
            &nbsp;
        </div>
        <div class="row">
            <div class="col-md-4 col-md-offset-4">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="submit" id="approve-btn" class="btn btn-danger">Save</button>
            </div>
        </div>
    }
</div>


<script type="text/javascript">
    $(function () {
        $('#approve-btn').click(function () {
            $('#modal-container').modal('hide');
        });
    });
</script>

EDIT: I should have mentioned in the initial post that the Modal just displays at the top of the page and goes to 100% width.

enter image description here

Upvotes: 1

Views: 454

Answers (1)

Josh Yolles
Josh Yolles

Reputation: 108

Well, I noticed (what I believe to be) a fairly simple mistake in your code just by looking at it:

dialog = modal.find('.modal-container');

finds any element with a CLASS of 'modal-container'.

In your code snippet, however, you have the ID of the div set to 'modal-container', not the CLASS.

So that line of code above is not locating the div you want. In fact, I don't think it is finding any elements (since there are none with a class of 'modal-container').

So maybe change it to something like:

<div class="modal fade modal-container" role="dialog">
    <div class="modal-content">
    </div>
</div>

OR leave the HTML the same and change the modal.find() to say something like:

dialog = modal.find('#modal-container');

Let me know if that helps.

Edit:

Your modal is full width because your Bootstrap modal structure is off. You are missing a div.

This is what you have:

<div id="modal-container" class="modal fade" role="dialog">
   <div class="modal-content">
   </div>
</div>

here is what you need (and should fix your problems):

<div id="modal-container" class="modal fade" role="dialog">
  <div class="modal-dialog">
     <div class="modal-content">
     </div>
  </div>

adding a div with the class of 'modal-dialog' should help.

Oh, and change the modal.find() to:

dialog = modal.find('.modal-dialog');

Upvotes: 2

Related Questions