0
ボタンがイベント発生をクリックしたときにモーダルポップアップを動的に作成します。 htmlボタンをクリックして、jqueryを使ってドロップ可能な機能を持つブートストラップパネルを追加しています。正常に動作します。 のCss： -jqueryを使用してモーダルを動的に作成する
<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">×</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、data、chrome、chrome-extension、https、 chrome-extension-resourceのプロトコルスキームでのみサポートされています。
firefoxでテストして私に知らせてください – Mahi
メインスレッドの同期XMLHttpRequestは、エンドユーザーの経験に悪影響を与えるため、推奨されていません。 http://xhr.spec.whatwg.org/ - Firefoxでテスト済み –
は、このようなコンテンツの一部としてのスクリプトタグです