Convert to popoup partial view

I am working with ASP.NET MVC5, I have an index view in which I have a WebGrid , from which I call my partial view, all the code to call the partial view from the controllers goes well, the problem is that when I call her popoup is not shown.

<div style="margin-top: 17px;">
        @{
            var grid = new WebGrid(
                canPage: true,
                rowsPerPage: Model.PageSize,
                canSort: true,
                ajaxUpdateContainerId: "grid");

            grid.Bind(Model.Content, rowCount: Model.TotalRecords, autoSortAndPage: false);
            grid.Pager(WebGridPagerModes.All);

            @grid.GetHtml(htmlAttributes: new {id = "grid"}, // id for ajaxUpdateContainerId parameter
                fillEmptyRows: false,
                tableStyle: "table table-bordered table-hover",
                mode: WebGridPagerModes.All,
                columns: grid.Columns(
                    grid.Column("PhoneId", "ID"),
                    grid.Column("Model", "Model", style: "col-lg-4"),
                    grid.Column("Company", "Company", style: "col-lg-3"),
                    grid.Column("Price", header: "Price", format: @<text>@String.Format("{0:C}", item.Price) </text>),
                    grid.Column(header: "Action", canSort: false, style: "action",
                        format: @<text>
                                    @Html.Raw("<a data-modal='' href='/phone/details/" + item.PhoneId + "' id='" + item.PhoneId + "' title='Detail'> <span class='glyphicon glyphicon-search'> </span> </a>")
                                    @Html.Raw("<a data-modal='' href='/phone/edit/" + item.PhoneId + "' id='" + item.PhoneId + "' title='Edit'> <span class='glyphicon glyphicon-edit'> </span> </a>")
                                    @Html.Raw("<a data-modal='' href='/phone/delete/" + item.PhoneId + "' id='" + item.PhoneId + "' title='Delete'> <span class='glyphicon glyphicon-trash'> </span> </a>")
                                 </text>)

                    ));
        }

    </div>

}

<!-- modal placeholder-->
<div id='myModal' class='modal fade in'>
    <div class="modal-dialog">
        <div class="modal-content">
            <div id='myModalContent'></div>
        </div>
    </div>
</div>

@section Scripts{
    @Scripts.Render("~/Scripts/Appjs/phones.js")
}

I think the problem is that it is not reaching phone.js When I click on Details, it calls my partial view Details, but it does not become popoup.

When I click on Detail I must have the anchor tag that I think is this: data-toggle="modal" data-target="#myModal" , hence the script that does not let me put the editor at the end of that code points to a js called phone.js but I do not know why it does not work.