如果面板关闭,模态窗口不显示 - Bootstrap

时间:2017-03-06 06:16:54

标签: twitter-bootstrap panel

情况:我想打开一个模态。我点击一个按钮,但模态没有显示。

问题:如果自举面板已关闭,则模式未显示。

请参阅代码笔链接:http://codepen.io/osion/pen/YZGwPN

  1. 点击打开模态 - 您看到模态未显示
  2. 刷新
  3. 点击面板 - 面板打开
  4. 点击打开模态 - 显示模态。
  5. 
    
    <!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&amp;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;
    &#13;
    &#13;

0 个答案:

没有答案