带链接的导航链接，但会打开模态

Question

我正在尝试创建类似的导航 airbnb.com

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

显示网址​​的地方 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();
});

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