jQuery模式弹出动态内容

Question

I am working on someone script.I can t understand it clearly to implement my code.I need this content in modal pop up.

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

This make some sense i think.it dynamically add content from json file as pargraphs.so when i click a paragraph it will redirect to some links.I dont want to get redirected.instead of that i just want to wrap everything under modal so i can stay in same page.redirect will done only in modal.

Answer 1

please check demolink Reference link 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>

Answer 2

use jqueryui dialog -modal ... https://jqueryui.com/dialog/

example: html

 <div id="dialog-modal" title="Basic modal dialog">
     <p>Adding the modal overlay screen makes the dialog look more prominent because it dims          out the page content.</p>
 </div>

js:

$(function() {
$( "#dialog-modal" ).dialog({
  height: 140,
  modal: true
  });
});

Answer 3

you can use jquery + jquery ui

the code

$(function(){
$( "#circle-more" ).dialog({
      height: 140,
      modal: true
    });
});

this a demo https://jqueryui.com/dialog/#modal

that's open the dialog at the start of the page.