Question

我想在按钮单击事件触发时动态创建模态弹出窗口。我通过单击html按钮使用jquery添加带有可删除工具的引导面板。工作良好。 Css： -

 <link href="css/bootstrap.min.css" rel="stylesheet">   
    <link href="css/style.css" rel="stylesheet">
    <link href="css/font-awesome.css" rel="stylesheet">

Html： -

<body>
 <div id="modalarea">
// modal's html will be added here.
</div>    
    <div class="col-md-12" style="background: -webkit-linear-gradient(#E5F2F6,#CDE8F0);margin-bottom: 20px;">
            <button class="btn btn-default pull-right" name="addpanel" id="btn_addpanel" value="Add Panel" type="button">Add Panel</button>
        </div>      
  <div class="col-xs-4 col-sm-2 col-md-2" id="sidebar">
      <div class="list-group" id="external-events">       
        <a href="#" class="list-group-item external-event label label-primary ui-draggable" id="draggable1" ><img src="images/areachart.png" /></a>                 
      </div>
   </div><!--/.sidebar-offcanvas-->
   <!--chart area -->
    <div class="col-xs-8 col-sm-10 col-md-10" id="chartarea">
          <div class="row" id="chartrow">
           // here dropable panels will be added on button click
          </div><!--/row-->
    </div><!-- end chart area -->

存储面板状态的输入

<input id="countpanels" name="countpanels" type="text" style="display:none;"/>
<input id="dragblename" name="dragblename" type="text" style="display:none;"/>
      <hr>

Javascript和jquery

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/draggable.js"></script>
<script>
var dividofpanel='';
var divdragingimage
var thisdragable= '';  
    $('#btn_addpanel').click(function() 
{  
   var totalcountofpanels=$('#countpanels').val();
   if(totalcountofpanels=='')
   {
     // no panels exist
     totalcountofpanels=1;
     $('#countpanels').val(parseInt(totalcountofpanels));   
   }
   else
   {
     // panels already exist
     totalcountofpanels=parseInt(totalcountofpanels)+1;
     $('#countpanels').val(parseInt(totalcountofpanels));   
   }
   var chartpanel='';
   var modalarea='';
   var chartpanelfull=$('#chartrow').html();
   var modalareafull =$('#modalarea').html(); 
   for(var divid =(totalcountofpanels-1);divid<totalcountofpanels;divid++)
   { 
    chartpanel='<div class="col-xs-8 col-lg-6"><div class="panel panel-default" id="divpanel'+totalcountofpanels+'"><div class="panel-heading demo2"  id="divpanelheading'+totalcountofpanels+'"><a class="fa fa-close pull-right" style="top:-5px" href="#" id="panelclose'+totalcountofpanels+'"></a><a data-toggle="modal" data-target="#modal'+totalcountofpanels+'" class="fa fa-cogs pull-right" style="top:-5px" href="#" id="panelsetting'+totalcountofpanels+'"></a></div><div class="panel-body chartareaclass demo" id="divpanelbody'+totalcountofpanels+'">Your Charting Area.</div></div>';
    chartpanelfull=chartpanelfull+chartpanel;
    modalarea='<div class="modal fade" id="modal'+totalcountofpanels+'" role="dialog"><div class="modal-dialog modal-lg"><div class="modal-content" id="modalcontent'+totalcountofpanels+'" style="border: rgba(0, 0, 0, 0.2) 3px solid; background:-webkit-linear-gradient(#E5F2F6,#CDE8F0);"><div class="modal-header title-chart" style="border-bottom: 3px solid #fff;" id="modalheader'+totalcountofpanels+'" ><button type="button" class="close" data-dismiss="modal">&times;</button><h4 class="modal-title" id="modalheader'+totalcountofpanels+'">Modal Header</h4></div><div class="modal-body" id="modalbody'+totalcountofpanels+'"><div class="col-md-2" style="padding-left: 0px;padding-right: 0px;"><div class="nav-side-menu"><div class="menu-list" id="modalmenulist'+totalcountofpanels+'"><ul id="menu-content" class="menu-content collapse out"><li  data-toggle="collapse" data-target="#menutarget1'+totalcountofpanels+'" class="collapsed active">   <a href="#">Set data <span class="arrow"></span></a></li><ul class="sub-menu collapse" id="menutarget1'+totalcountofpanels+'"><li class="active"><a href="#">CSS3 Animation</a></li><li><a href="#">Bootstrap Model</a></li></ul><li data-toggle="collapse" data-target="#menutarget2'+totalcountofpanels+'" class="collapsed"><a href="#"> Services <span class="arrow"></span></a></li> <ul class="sub-menu collapse" id="menutarget2'+totalcountofpanels+'"><li>New Service 1</li> <li>New Service 3</li></ul><li data-toggle="collapse" data-target="#menutarget3'+totalcountofpanels+'" class="collapsed"><a href="#"> New <span class="arrow"></span></a></li><ul class="sub-menu collapse" id="menutarget3'+totalcountofpanels+'"><li>New New 1</li><li>New New 3</li></ul><li><a href="#">Profile</a></li><li><a href="#">Users  </a></li></ul></div></div></div><div class="col-md-5" style="border-left: 1px solid #fff;"><div class="row" id="modalrow'+totalcountofpanels+'"></div></div><div class="col-md-5 thumbnail"><div id="mychartdiv" style="height:200px;width:400px;"></div></div></div><div class="modal-footer" style="border:1px"><button type="button" class="btn btn-primery" data-dismiss="modal">Close</button></div></div></div></div>';
    modalareafull=modalareafull+modalarea; //html of modal will be added in modalarea div tag at top of the body
   // Every chart panel contains the WRENCH ICON as hyperlink that calls the Unque modal. 
   }
   $('#modalarea').html(modalareafull);
   $('#chartrow').html(chartpanelfull);
   });    
</script>

它显示我的错误： -

jquery-1.12.4.js：10254 XMLHttpRequest无法加载js / bootstrap.min.js。 跨源请求仅支持协议方案：http，数据，chrome，chrome-extension，https，铬扩展资源。

Answer 1

请在标题部分添加您的Jqueries。

使用jquery

1 个答案: