Navigation Link with URL but opens Modal instead

Question

I'm trying to create a navigation similar to airbnb.com

what I'm stuck on is how do you code the login button on the navigation panel

where it displays a url to airbnb.com/login

however instead a modal login form pops up

yet, if you right click the login link and choose open in a new tab, a page pops up with the log in form (non modal).

Thanks,

• Beginner at coding.

Answer 1

This see here 1 or see here 2 or atleast if you searched around on stackoverflow, you would get some great solutions.

You haven't provided additional details for instance whether you are using a frontend framework like angular or ember.js or just plain HTML/JS combination as some of these frameworks tend to impose some additional conventions.

Otherwise, if it's plan HTML and JS with bootstrap 3 framework from this read more, follow these 2 basic steps.

Create a link with id

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

Watch for the trigger on the link

// 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();
});

NOTE: You need to spend sometime understanding how it all works together.