情况:我想打开一个模态。我点击一个按钮,但模态没有显示。
问题:如果自举面板已关闭,则模式未显示。
请参阅代码笔链接:http://codepen.io/osion/pen/YZGwPN
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div><button type="button" class="btn btn-info" data-toggle="modal" data-target="#modalAddConfigGroup">Open Modal</button></div>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#addNewProdColl"><span class="glyphicon glyphicon-chevron-right"></span>Panel</a>
</h4>
</div>
<div id="addNewProdColl" class="panel-collapse collapse">
<div class="panel-body">
<div id="addNewProdWrapper">
<form action="#" method="POST" enctype="multipart/form-data" role="form" data-toggle="validator" id="addNewProdUserForm" novalidate="">
<script type="text/javascript" src="http://testamv.test.com/modul/product/addProduct/addNew/test/js/addNewProdUserPage.js"></script>
<script type="text/javascript" src="http://testamv.test.com/modul/product/addProduct/addNew/1/js/addNewProdImg_newProdImg.js"></script>
<div class="oneFormElementWrapper">
<div class="form-group col-single">
<label class="formText">Title*</label><input type="text" name="prodName" maxlength="25" class="form-control">
</div>
<div class="form-group col-single">
<label class="formText">Product price (net) (vnd)*</label>
<input type="number" name="price" value="0.0" class="form-control" id="modProdPrice" placeholder="0.0" step="0.1" min="0">
</div>
<div class="form-group col-single">
<label>Sales tax (%)</label>
<input type="number" name="vatPercent" value="0.0" class="form-control" id="modVatPercent_arrowP" placeholder="0.0" step="0.1" min="0">
</div>
<div class="form-group descrNewProd">
<label class="formText">Description</label>
<textarea name="description" maxlength="500" class="form-control" id="descrNewProd" style="height: 200px;"></textarea>
</div>
</div>
<hr style="margin:0px"><div class="form-group">
<label class="formText" style="float: none">Profil image(1000px*1000px,.jpg,2
MB)*</label>
<div class="newProdImgPrevWrap">
<img alt="title image" src="http://image.test.com/product/prodSearch1/noPic.jpg" class="newProdImgPrev" id="newProdImgPrev"> <input type="file" name="profImg" id="addNewProdImg">
</div>
</div>
<div class="form-group">
<label class="formText" style="display: block">Volume*</label>
<input type="number" name="piece" value="1" class="form-control" id="addNewProdVolNr" placeholder="0" step="any" min="0"> <select name="volume" class="form-control" id="addNewProdVolume" required=""><option value="9">Aluminum bottle</option><option value="10">Barrel</option><option value="7">Bottle glass</option><option value="6">Bowl</option><option value="8">Can</option><option value="4">Glass</option><option value="3">Gram</option><option value="13">Hot Pot</option><option value="2">Kilogram</option><option value="11">Pet bottle</option><option value="1">Piece</option><option value="5">Plate</option><option value="12">Scoop</option></select>
</div>
<div class="form-group">
<label class="formText">Configuration</label>
<div><button type="button" class="btn btn-info" data-toggle="modal" data-target="#modalAddConfigGroup">Modal</button></div>
<div id="newconfigelm"></div>
</div>
<div class="form-group">
<label class="formText">Category*</label> <select name="prodCatLvl1" class="form-control" id="choCatProdlvl1" required=""><option selected="" disabled=""></option><option value="1">Food&Drink</option></select>
<div id="choCatProdSel"></div>
</div>
<input type="hidden" name="container" value="c-7257d2bdb8624c2" id="addProdToContArrowP_idCont">
<input type="hidden" name="country" value="1" id="addProdToContArrowP_country">
<input type="hidden" name="place" value="1" id="addProdToContArrowP_place">
<div id="modalAddConfigOption" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">?!!!Trans.mProdConfig1_AddNewGroupOption.Trans!!!?</h4>
</div>
<div class="modal-body">
<div class="form-group">
<span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
<input type="number" step="0.1" min="1" class="form-control input-sm inpconfigprice" placeholder="Price">
<label class="inputconfigprtxt">vnd</label>
</div>
<div class="formConfigDesc">?!!!Trans.mProdConfig1_langDescriptionTxt.Trans!!!?</div>
<div class="form-group">
<input type="text" value="" data-idlang="2" class="form-control input-sm inpconfiglang" placeholder="DE">
<input type="text" value="" data-idlang="1" class="form-control input-sm inpconfiglang" placeholder="EN">
<input type="text" value="" data-idlang="3" class="form-control input-sm inpconfiglang" placeholder="VN">
</div>
<input type="hidden" id="inpconfiggroupid">
<input type="hidden" value="new" id="configInpGroupOptAct">
</div>
<div class="modal-footer">
<button type="button" name="action" class="btn btn-danger btType1" id="btaddconfigoption">?!!!Trans.Save.Trans!!!?</button>
<button type="button" class="btn btn-default" data-dismiss="modal">?!!!Trans.Close.Trans!!!?</button>
</div>
</div>
</div>
</div>
<div id="modalAddConfigGroup" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">?!!!Trans.mProdConfig1_AddNewGroup.Trans!!!?</h4>
</div>
<div class="modal-body">
<div class="form-group">
<div class="formConfigDesc">?!!!Trans.mProdConfig1_multipleChooseDesc.Trans!!!?</div>
<select class="form-control" id="confGroupMult">
<option value="1">?!!!Trans.Yes.Trans!!!?</option>
<option value="0">?!!!Trans.No.Trans!!!?</option>
</select>
</div>
<div class="form-group">
<div class="formConfigDesc">?!!!Trans.mProdConfig1_requiredGroup.Trans!!!?</div>
<select class="form-control" id="confGroupReq">
<option value="1">?!!!Trans.Yes.Trans!!!?</option>
<option value="0">?!!!Trans.No.Trans!!!?</option>
</select>
</div>
<div class="formConfigDesc">?!!!Trans.mProdConfig1_langDescriptionTxt.Trans!!!?</div>
<div class="form-group">
<input type="text" value="" data-idlang="2" class="form-control input-sm inpconfiggrouplang" placeholder="DE">
<input type="text" value="" data-idlang="1" class="form-control input-sm inpconfiggrouplang" placeholder="EN">
<input type="text" value="" data-idlang="3" class="form-control input-sm inpconfiggrouplang" placeholder="VN">
</div>
<input type="hidden" value="new" id="configInpGroupAct">
</div>
<div class="modal-footer">
<button type="button" name="action" class="btn btn-danger btType1" id="btaddconfiggroup">?!!!Trans.Save.Trans!!!?</button>
<button type="button" class="btn btn-default" data-dismiss="modal">?!!!Trans.Close.Trans!!!?</button>
</div>
</div>
</div>
</div>
<div>
<button type="submit" name="action" class="btn btn-danger btType1" id="addNewProdFormSubmit">Save</button>
<div id="addNewUProdMsg"></div>
</div>
</body>
</html>
&#13;