Невозможно добавить модальное окно с помощью JavaScript

$(document).ready(function(){
    DoMyApiCalls("boxWrap");

    var current_title = $(document).attr('title'); //CURRENT_TITLE is supposed to be the "FolderName".

    if (current_title == 'Acuvue') {
		    getModal("Acuvue");
    }
});

function DoMyApiCalls(elementId) {
$.ajax({
    url:  "/bdm/business-development/_api/web/lists/GetByTitle('CompletedSubmissionTiles')/Items?$select=EncodedAbsUrl,Title,Line1,Line2,Hyperlink,TargetWindow,DescriptionHTMLOption,Line1,TileOrder&$orderby=Title asc",
    type: "GET",
    headers: {
        "accept": "application/json; odata=verbose"
    },
    success: function (data) {
		if (data.d.results) {
			var object = data.d.results;
			var Line1var;

			for(var i = 0; i < object.length; i++)
			{
				if (object[i].Line1 != null) { // Covers 'undefined' as well
					Line1var = "<div class='Line1'>" + object[i].Line1 + "</div>";
				} else {
					Line1var = "";
				}
				
				$('#' + elementId).append("<div class='col-md-4 box' data-toggle='modal' data-target='#modal"+object[i].TileOrder+"' id='TileBox"+object[i].TileOrder+"'><div id='titleBox' class='titleBox'><h1>" + object[i].Title + "</h1><div style='width:250px; height: 130px;background-color: white; border: 1px solid lightgrey;'><img style='width: auto; height: inherit; margin-left: auto; margin-right: auto; display: block;' src='" +  object[i].EncodedAbsUrl + "' alt='" + object[i].Title +"'/></div></div></div>");
				
				filtering(object[i].Title);     
			  }		
		  }
    }									
  });
};

function filtering(title) {
    var filter = "Name eq '" + title + "'";
    
    $pnp.setup({
        baseUrl: "/bdm/business-development/"
    });
    
    $pnp.sp.web.folders.getByName('Completed Submissions').folders.filter(filter).expand("Files").get().then(function(data){    
    });
}

function getModal(folderName) {
	
  $pnp.setup({
		baseUrl: "/bdm/business-development/Completed%20Submissions/"
	});

	$pnp.sp.web.getFolderByServerRelativeUrl("/bdm/business-development/Completed%20Submissions/" + folderName).files.orderBy("Name").get().then(function(f) {

		var files = '';

		$.each(f, function(index, value){
			var filesHtml = "<div class='file'>" + 
								"<a target='_blank' href='" + value.ServerRelativeUrl + "?web=1'><img src='//PublishingImages/wordThumbSmall.png'/></a>" + 
								"<a target='_blank' href='" + value.ServerRelativeUrl + "?web=1'><p id='fileTitle'>" + value.Title + "</p></a>" + 
							"</div>";
			
			files = files + filesHtml;
		});
		$(".Modalbody").append(files);
	});
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id = "modal" class = "modal fade" role = "dialog">
    <div class = "modal-dialog modal-lg">
        <div class = "modal-content">
            <div class = "modal-header">
                <button type = "button" class = "close" data-dismiss = "modal"><div id = "x">&times;</div></button>
                <h4 class = "modal-title">

                </h4>
            </div>
            <div class = "modal-body">
                <div class = "FT-main-category" style = "margin-top:0px;">
                    <div class = "FT-main-header ms-WPBody"><strong><span style = "color: white;">Files</span></strong></div>
                    <div class = "Modalbody">
                    
                    </div>
                </div>
            </div>
            <div class = "modal-footer">
                <button type = "button" class = "btn btn-default" data-dismiss = "modal">Close</button>
            </div>
        </div>
    </div>
</div>