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:

@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>
}

}