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.so当我点击一个段落它将重定向到一些链接。我不想被重定向。而不是我只是想把所有东西都包裹下来modal所以我可以保持在同一个page.redirect只会在模态中完成。

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>

Answer 2

使用jqueryui dialog -modal ... https://jqueryui.com/dialog/

例如： 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

你可以使用jquery + jquery ui

代码

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

这是一个演示 https://jqueryui.com/dialog/#modal

打开页面开头的对话框。

Jquery模式弹出动态内容

3 个答案: