Returning Error View after calling a Modal pop up

Question

Hello, I have a problem with the front end of my application.

I have the following method to return errors:

    public class ErrorController : Controller
    {
        //Erro 500 Servidor
        public ActionResult Index()
        {
            ViewBag.AlertaErro = "Ocorreu um Erro :(";
            ViewBag.MensagemErro = "Tente novamente ou " +
                "contate um Administrador";

            return View("Error");
        }

        //Error 404
        public ActionResult NotFound()
        {
            ViewBag.AlertaErro = "Ocorreu um Erro :(";
            ViewBag.MensagemErro = "Não existe uma página para a URL informada";

            return View("Error");
        }

         //Erro 401 permissão de execução       
        public ActionResult AccessDenied()
        {
            //ViewBag.AlertaErro = "Acesso Negado :(";
            //ViewBag.MensagemErro = "Você não tem permissão para executar isso";

            return PartialView("Error403");
        }

    }
}

My index page that where is the modal code and where calls the "details" method that is restricted access

<td>
                    @*@Html.ActionLink("Editar", "Edit", new { id = item.Id })*@
                    <a href="@Url.Action("Edit","Barcos", new { id = item.Id })" class="btn btn-warning" data-target="modaleditar">
                        <span title="Editar" class="glyphicon glyphicon-pencil">  </span>
                    </a>
                      <a href="#" class="btn btn-primary btnDetalhes" data-value="@item.Id">
                        <span title="Editar" class="glyphicon glyphicon-search">  </span>
                    </a>
                    <a href="@Url.Action("Delete","Barcos", new { id = item.Id })" class="btn btn-danger">
                        <span title="Excluir" class="glyphicon glyphicon-trash"></span>
                    </a>

                </td>


<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title" id="exampleModalLabel">Detalhes </h2>
                <h4>Dados da Embarcação</h4>

            </div>
            <div class="modal-body">
                <div id="teste"></div>
            </div>
        </div>
    </div>
</div>


@section scripts{

    <script type="text/javascript">


        $(document).ready(function () {

            $.ajaxSetup({ cache: false });


            $(".btnDetalhes").click(function () {

                var id = $(this).data("value");

                $("#teste").load("/Barcos/Details/" + id, function () {
                    $('#myModal').modal("show");
                });
            });
        });

    </script>



    }

Error page:

@model System.Web.Mvc.HandleErrorInfo

@{
    ViewBag.Title = "Acesso Negado!";
}

<h1 class="text-danger">Opa!</h1>
<h2 class="text-danger">Acho que você não pode fazer isto :(</h2>

Only by clicking on the details method and the modal open, the error message is staying within my navbar class, as in the image below

Ai as I would or to already open the error inside the modal or msm open on another page, without the message appear inside the Nav bar