Jquery load whole page instead of only modal

Question

I'm trying to make a "Create project" modal. At first i created it inside a partial view but i found it difficult to populate it with data from other models, so instead i decided to move the partial view content inside my actual razor page. All works as it should but when I press the button to launch the modal, the current page is loaded in the background as well. Here is the html for the modal code:

<div class="modal fade" id="add-project" tabindex="-1" role="dialog" aria-labelledby="addProjectLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="addContactLabel">Create Project</h5>
        </div>
        <div class="modal-body">
            <form asp-page-handler="ProjectModalPartial">
                @*numele metodei*@
                <input name="IsValid" type="hidden" value="@ViewData.ModelState.IsValid.ToString()" />
                <div class="form-group">
                    <label asp-for="ProjectsModel.ProjectName">Title</label>
                    <input asp-for="ProjectsModel.ProjectName" class="form-control" placeholder="MyProject1" />
                    <span asp-validation-for="ProjectsModel.ProjectName" class="text-danger"></span>
                </div>
                <br />
                <div class="form-group">
                    <label asp-for="ProjectsModel.ProjectDescription">Description</label>
                    <textarea asp-for="ProjectsModel.ProjectDescription" class="form-control" rows="3" placeholder="This is my first project"></textarea>
                    <span asp-validation-for="ProjectsModel.ProjectDescription" class="text-danger"></span>
                </div>
                <br />
                <div class="center" style="padding-bottom:0px;">

                    <p style=" margin: 2px">Project Participants</p>               
                    <select multiple id="TicketType" class="form-control dropdown-toggle" asp-for="ProjectsModel.ProjectParticipants" asp-items="new SelectList(Model.UserList)" style="width: 470px;"></select>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary" data-save="modal">Save</button>
        </div>
    </div>
</div>

And here is the jquery code,without the logic for saving:

$(function () {
var placeholderElement = $('#modal-placeholder');  
$('button[data-toggle="ajax-modal"]').click(function (event) {
    var url = $(this).data('url');
    $.get(url).done(function (data) {
        //$(document.body).html(data).find('.modal').modal('show');
        placeholderElement.html(data);                         
      placeholderElement.find('.modal').modal('show');            
    });
});});

Is there another way of loading the modal, without the additional content?

Here is a photo so you better see what's happening

Answer 1

I managed to solve the problem.
Since I no longer have a partial view I don't need the placeholderElement anymore, so I can get rid of .find(modal) all together.

The code now looks like this:

$(function() {
    var placeholderElement = $('#modal-placeholder');  
    $('button[data-toggle="ajax-modal"]').click(function(event) {
        var url = $(this).data('url');
        $.get(url).done(function (data) {
            $('#add-project').modal('show');            
        });
    });
});