javascript - Jquery 模式弹出动态内容

Question

我正在编写某人的脚本。我无法清楚地理解它来实现我的代码。我需要在模式弹出窗口中显示此内容。

    <div data-rel="close" data-role="panel" data-display="overlay" data-position="right" id="circle-more">
    <div class="details-arrow">
    <div class="boxscroll">
      <div class="contentscroll  circle-more-cont">  
      </div>
    </div>
    </div>
    </div>

Actually now its taking data dynamically from db and hidden.It working fine but it shows in page.I want to show this entire content in modal.can anybody help me.I tried all options nothing work out.


it get contents from here

function circleMoreDetailsSocial(social_ring_obj_index, comment_details, cur_obj)
{
    $(".circle-more-cont").html('');
    if (nice) nice.remove();
    var i = 1;
   $.each(circleData4[social_ring_obj_index], function(social_value_index, social_value)
    {
         $.each(social_value, function(value_index, value)
        {
            if(value[1] == 'facebook')
                social_media_link = "https://facebook.com/"+value[2];       
//              <div class='"+value_index+"' style='background-color:"+eval("color"+i)+"'>&nbsp;</div>
            $(".circle-more-cont").append("<a href="+social_media_link+" onclick='javascript: void(0)' return false;' ><p>"+value[0]+"</p></a>");
            i++;
        });
    });



  $("#circle-more").panel('open');
    nice =  $(".boxscroll").niceScroll(".contentscroll",{cursorcolor:"#F00",cursoropacitymax:0.7,boxzoom:true,touchbehavior:true}); 
return false;
}

我认为这有一定道理。它动态地将 json 文件中的内容添加为 pargraphs。因此，当我单击一个段落时，它将重定向到某些链接。我不想被重定向。相反，我只想将所有内容都包装在下面模态，这样我就可以留在同一页面。重定向只会在模态中完成。

Answer 1

请检查demolink 引用链接http://getbootstrap.com/javascript/#modals

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>