带有 URL 的导航链接，但改为打开模态

Question

我正在尝试创建类似于 爱彼迎网

我坚持的是如何在导航面板上编写登录按钮

它在哪里显示一个网址 airbnb.com/login

但是会弹出一个模式登录表单

但是，如果您右键单击登录链接并选择在新选项卡中打开， 弹出一个带有登录表单的页面（非模式）。

谢谢，

• 编码初学者。

Answer 1

这个see here 1 或see here 2 或至少如果你在stackoverflow 上搜索，你会得到一些很好的解决方案。

您没有提供其他详细信息，例如您是使用 angular 或 ember.js 之类的前端框架，还是只是简单的 HTML/JS 组合，因为其中一些框架倾向于强加一些额外的约定。

否则，如果是从read more 计划使用 bootstrap 3 框架的 HTML 和 JS，请遵循以下 2 个基本步骤。

使用 id 创建链接

<a class="" href="/log/viewslim?id=72" title="View" data-target="#myModal" data-toggle="modal">View 72</a>

注意链接上的触发器

// this is just an example, remember to adapt the selectors to your code!
$('.modal-link').click(function(e) {
var modal = $('#modal'), modalBody = $('#modal .modal-body');

modal
    .on('show.bs.modal', function () {
        modalBody.load(e.currentTarget.href)
    })
    .modal();
    e.preventDefault();
});

注意：您需要花一些时间了解它们是如何协同工作的。