Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Kathryn 3 posts 73 karma points
    May 29, 2019 @ 23:34
    Kathryn
    0

    Bootstrap modal not quiet working

    I am trying to use a Bootstrap modal to launch more information about an event, it is kind of working... but the screen darkness over the modal and I am unable to close the modal.

    See image:

    enter image description here

    @inherits UmbracoViewPage

    @using USNOptions = USNStarterKit.USNEnums.Options;

    @{ var currentPage = Umbraco.TypedContent(UmbracoContext.Current.PageId);

    string anchorId = String.Empty;
    string customComponentClasses = String.Empty;
    string animateClass = String.Empty;
    
    var eventsList = Model.GetPropertyValue<IEnumerable<IPublishedContent>>("events");
    
    string pageType = ViewData["pageType"] != null ? ViewData["pageType"].ToString() : "standard";
    
    @* Add div for column width on Advanced Pages *@
    
        anchorId = "id=\"pos_" + Model.Id + "\" ";
    
    <!-- PAGE COMPONENT TEXT -->
    if (eventsList != null)
    {
        <div class="spc textblock @animateClass @customComponentClasses" data-os-animation="fadeIn" data-os-animation-delay="0s" @Html.Raw(anchorId)>
            @foreach(var item in eventsList)
            {
                <div class="list-group">
                    <a href="#" class="list-group-item list-group-item-action">
                        <div class="d-flex w-100 justify-content-between">
                            <h5 class="mb-1">@item.GetPropertyValue("eventTitle"): @item.GetPropertyValue("eventStartDateTime")</h5>
                            <p class="mb-1">@item.GetPropertyValue("eventDescription")</p>
    
                    <div class="container">
                        <button type="button" class="btn btn-info-sm" data-target="#events" data-toggle="modal">See Details</button>
                            <div class="modal fade" id="events" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    
                    <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                            <button class="close" data-dismiss="modal" aria-label="Close" aria-hidden="true">&times;</button>
                        </div>
                        <div class="modal-body">
                            <p>Event Content Here</p>
                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-primary" data-dismiss="modal">Close</button>
                        </div>
                        </div>
                        </div>
                        </div>
                    </div>
                    </div>
    
                    </a>
                </div>
    
            }
        </div>
    }
    
    <!--// PAGE COMPONENT TEXT -->
    
    @* Close div for column width on Advanced Pages *@
    if (!Model.Parent.Parent.IsDocumentType(UsnstandardPage.ModelTypeAlias) && !Model.Parent.Parent.IsDocumentType(UsnstandardPageBlogPost.ModelTypeAlias))
    {
        @:</div></div></div>
    }
    

    }

  • Søren Kottal 571 posts 3749 karma points MVP 3x c-trib
    May 30, 2019 @ 12:38
    Søren Kottal
    0

    Hi Kathryn

    This is probably more a bootstrap problem, it has been some years since I used it myself, but I think you might have a problem with the stacking context of your html.

    If you right click your page, and select "inspect element" you will probably see that the .modal-backdrop element is placed on top of everything else. This is typically because the stacking context of your .modals is different. A solution could be to move your .modals to your <body> element.

  • Kathryn 3 posts 73 karma points
    May 30, 2019 @ 15:56
    Kathryn
    0

    Thank you for the response. I inspected my modal and found the modal-backdrop was not before the actual container with the modal...

    enter image description here

  • May 31, 2019 @ 17:42
    Abuabdellah | Biker | Umbracian | Freelancer | PPH.me/abuabdellah
    0

    In case the issue not fixed yet I suggest to make the modal as a direct child of body.

  • Kathryn 3 posts 73 karma points
    May 31, 2019 @ 17:44
    Kathryn
    0

    That worked! Amoungst some other tweaking. Thank you.

  • May 31, 2019 @ 18:11
    Abuabdellah | Biker | Umbracian | Freelancer | PPH.me/abuabdellah
    0

    I suggest to select the appropriate fix as solution for this post.

  • Elisha 9 posts 99 karma points
    Jan 19, 2021 @ 13:54
    Elisha
    0

    You need to make your modal to be the last child of the body tag. In your .js file:

    $('#myModal').appendTo("body")
    

    link to SO question

Please Sign in or register to post replies

Write your reply to:

Draft