открытые внешние ссылки в модальной форме вместо новой вкладки или нового окна

Question

Когда пользователь нажимает на внешнюю ссылку, я пытаюсь отобразить содержимое в модальном формате, а не открывать новую вкладку или новое окно. Я даже не уверен, что это возможно. это мой .js, если кто-нибудь может мне помочь или указать в правильном направлении

$(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

Я считаю, что вам нужно сделать что-то вроде этого.

<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> 



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

Прикрепите обработчик события click к тегу. По щелчку тега выполните запрос ajax для извлечения данных, а затем заполните модальные поля.