open external links in modal instead of new tab or new window

Question

when a user clicks on an external link i am trying to display the content in a modal instead of opening a new tab or new window. Im not even sure if this is possible. this is my .js if anyone could help or point me in the right direction

$(document).ready(function(){

homepage();

$('#new').on('click', newPage);
$('#rising').on('click', rising);
$('#controversial').on('click', controversial);
$('#top').on('click', topPosts);
$('#gilded').on('click', gilded);
$('#wiki').on('click', wiki);
// $('#promoted').on('click', promos);

function redditFunction(response){

    var homePage = response.data.children;
    $('#main').empty();

    for(i=0; i<homePage.length; i++){
        var post = homePage[i];
        var object = post.data;
        var title = object.title;
        var image = object.thumbnail;
        var score = object.score;
        var url = object.url;
        var $title = $('<a />').html(title)
                                    .attr('href', url);
                                    // .get(this, function(post) {
                                            // $(post).append(url).modal();
                                        // });
        var $image = $('<img />')
                                    .attr('src', image);
        var $col1 = $('<div />')
                                .addClass('col-md-4')
                                .append($image);
        var $col2 = $('<div />')
                                .addClass('col-md-8')
                                .append($title);
        var $row = $('<div />')
                                .addClass('row')
                                .append($col1, $col2);
        var $li = $('<li />').html(score)
                            .append($row);
        $('#main').append($li);
    }
}






 function homepage (){
    var request = $.ajax({
      url: 'https://www.reddit.com/.json'
    });
    request.done(function(response) {
      redditFunction(response);
      });
    }

    function newPage(){
        var request = $.ajax({
            url: 'https://www.reddit.com/new/.json'
        });
        request.done(function(response){
            redditFunction(response);
        });
    }

    function rising(){
        var request = $.ajax({
            url: 'https://www.reddit.com/rising/.json'
        });
        request.done(function(response){
            redditFunction(response);
            console.log("rising is working");
        });
    }

    function controversial(){
        var request = $.ajax({
            url: 'https://www.reddit.com/controversial/.json'
        });
        request.done(function(response){
            redditFunction(response);
            console.log("controversial is working");
        });
    }

    function topPosts(){
        var request = $.ajax({
            url: 'https://www.reddit.com/top/.json'
        });

        request.done(function(response){
            redditFunction(response);
            console.log("topPost is working");
        });
    }

    function gilded(){
        var request = $.ajax({
            url: 'https://www.reddit.com/gilded/.json'
        });

        request.done(function(response){
            $('#main').empty();
            var gildedProps = response.data.children
            for(var i = 0; i < gildedProps.length; i++) {
                var linkTitle = gildedProps[i].data.link_title;
                var link = gildedProps[i].data.link_url;
                var score = gildedProps[i].data.score;
                var bodyHtml = gildedProps[i].data.body_html;
                var bodyText = gildedProps[i].data.body;

        var gildedElements =
            ['<li>' + score +
            '<h5><a href="' + link +'">' + linkTitle + '</a></h5>' +
            '<p>' + bodyText + '</p>' +
            '</li>'].join('');

            $('#main').append(gildedElements);
        }
        });
    }

    // Link: Promotional ##### THIS IS NOT WORKING
    // function promos(){
    //  var request = $.ajax({
    //      url: 'https://www.reddit.com/ads/.json'
    //  });
    //
    //  request.done(function(response){
    //      $('#results').empty();
    //      var promoProps = response.data.children
    //
    //      for(var i = 0; i < promoProps.length; i++) {
    //          // title, url, thumbnail, score
    //          var title = promoProps[i].data.title;
    //          var titleLink = promoProps[i].data.url;
    //          var thumb = promoProps[i].data.thumbnail;
    //          var score = promoProps[i].data.score;
    //
    //      var promoElements =
    //          ['<li>' + score +
    //          '<img src="' + thumb + '" />' +
    //          '<h5><a href="' + titleLink + '" />' + title +

    });



    <html>
    <head>
    <meta charset="utf-8">
    <title>Ajaxify Reddit</title>
    <link rel="stylesheet"        href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" media="screen" title="no title">
    <link rel="stylesheet" href="css/global.css" media="screen" title="no title">

    </head>
    <body>

      <div class="container">
      <div class="row">
      <div class="col-md-4">
        <h1>Ajaxify Reddit</h1>
      </div>

      <nav class="col-md-8">
        <ul>
          <li><a href="#" id="new">new</a></li>
          <li><a href="#" id="rising">rising</a></li>
          <li><a href="#" id="controversial">controversial</a></li>
          <li><a href="#" id="top">top</a></li>
          <li><a href="#" id="gilded">gilded</a></li>
          <li><a href="#" id="wiki">wiki</a></li>
          <li><a href="#" id="promoted">promoted</a></li>
        </ul>
      </nav>
    </div>

    <div id="main"></div>
    </div>

    <div class="modal">
    <p>Second AJAX Example!</p>
    </div>


    <script src="http://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
   <script src="js/app.js" charset="utf-8"></script>
   </body>
   </html>

Answer 1

I believe you need to do something like this.

 $(document).on("click", ".open-modal", function() { var myBookId = $(this).data('id'); $(".modal-body #bookId").val(myBookId); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p>Link 1</p> <a data-toggle="modal" data-id="ISBN564541" title="Add this item" class="open-modal btn btn-primary" href="#addBookDialog">test</a> 

Attach a click event handler to the tag. On the click of the tag make an ajax request to fetch the data and then populate the modal fields.