Topic: Modal with (another) side modal

Coen Oude Luttikhuis pro asked 5 years ago


Hi, Im using a main modal with a side modal, But when i close the side modal the focus goes all the way back to the backside. Is there a possibility to regain focus on the main modal? I've tried : $('#centralModalInfo').on('hidden.bs.modal', function (e) { $('#configurator').modal('show'); // $('#configurator').focus() // and a lot of other stuff but it doesnt seem to work. }) Any help would be appreciated. Kind regards, Coen

Marta Wierzbicka staff answered 5 years ago


Hi, you can send me to m.szymanska@mdbootstrap.com Best, Marta

i can also provide you login but then in private message

            <div class="modal fade" id="configurator" data-backdrop="false"  data-keyboard="false" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <!--<button type="button" class="close" data-dismiss="modal" ng-click="dismissMenu(activatedTimeOfDay)" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                              </button>-->
                            <h4 class="modal-title" id="myModalLabel">{{menuTitle}}</h4>
                        </div>
                        <div class="modal-body">
                            <div class="modal-bodyheader">
                                <div class="row menu-header">
                                    <div class="navheader">
                                        <!-- Nav tabs -->
                                        <ul class="nav nav-tabs md-pills pills-default schemaTab" id="menuTab" role="tablist">
                                            <li class="nav-item">
                                                <a class="nav-link" ng-class="{'active' : activatedMenu == 2}" data-toggle="tab" href=".panel31" ng-click="setMenu(2)" role="tab"><i class="fa fontawesome-book fa-2x"></i><br>
                                                    <p id="benddTab">Recepten
                                                        <p>
                                                </a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link nav-products" ng-class="{'active' : activatedMenu == 1}" data-toggle="tab" href=".panel32" ng-click="setMenu(1)" role="tab"><i class="fa fontawesome-shopping-cart fa-2x"></i><br>
                                                    <p id="benddTab">Producten</p>
                                                </a>
                                            </li>

                                            <li class="nav-item">
                                                <a class="nav-link" ng-class="{'active' : activatedMenu == 3}" data-toggle="tab" href=".panel33" role="tab" ng-click="setMenu(3)"><i class="fa fontawesome-thumbs-up fa-2x"></i><br>
                                                    <p id="benddTab">Aanbevolen</p>
                                                </a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link nav-recipes" ng-class="{'active' : activatedMenu == 4}" data-toggle="tab" href=".panel34" role="tab" ng-click="setMenu(4)"><i class="fa fa-star fa-2x"></i><br>
                                                    <p id="benddTab">Mijn Recepten</p>
                                                </a>
                                            </li>
                                        </ul>
                                            <div class="benddBuddyWrapper" ng-class="{'active' : activatedMenu == 1}">
                                                <div class="inline-block ">
                                                    <div class="bar-used">
                                                        <p>{{totalCal | number : 2}}</p>
                                                    </div>
                                                    <div class="barWrapper">
                                                    <span class="progressText"><B>Energie</B><a class="unitOfMeasure"> (Cal)</a></span>
                                                        <div class="progress">

                                                            <div class="progress-bar" role="progressbar"  ng-class="{'on-top' : (getPercentageMeal('energiescore') > 96 && getPercentageMeal('energiescore') < 104)  , 'to-high' : getPercentageMeal('energiescore') > 110 , 'on-edge' : (getPercentageMeal('energiescore') >= 104 && getPercentageMeal('energiescore') < 110) } "  ng-style="{width : ( getPercentageMeal('energie') + '%' ) }" aria-valuemin="0" aria-valuemax="100" >   
                                                                    <span  ng-show="currentCal > 0" class="popOver"  id="energyPercentage" data-toggle="tooltip" data-trigger="hover" data-placement="top"><span ng-show="currentCal > 0">+</span>{{currentCal | number : 2}} </span>   
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="bar-counter">
                                                        <p>{{user.energy | number : 2}}</p>
                                                    </div>
                                                    </div>
                                                    <div class="inline-block">
                                                    <div class="bar-used">
                                                        <p>{{totalCarbo | number : 2}}</p>
                                                    </div>
                                                    <div class="barWrapper">
                                                    <span class="progressText"><B>Koolhydraten</B><a class="unitOfMeasure"> (Gr.)</a></span>
                                                        <div class="progress">
                                                            <div class="progress-bar" role="progressbar"  ng-class="{'on-top' : (getPercentageMeal('carbscore') > 96 && getPercentageMeal('carbscore') < 104)  , 'to-high' : getPercentageMeal('carbscore') > 110 , 'on-edge' : (getPercentageMeal('carbscore') >= 104 && getPercentageMeal('carbscore') < 110) } " ng-style="{width : ( getPercentageMeal('carbo') + '%' ) }" aria-valuemin="0" aria-valuemax="100" >   
                                                                    <span ng-show="currentCarbo > 0"   class="popOver" data-toggle="tooltip" data-placement="top"><span ng-show="currentCarbo > 0">+</span>{{currentCarbo | number : 2}} </span>   
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="bar-counter">
                                                        <p>{{user.carbohydrates | number : 2}}</p>
                                                    </div>
                                                    </div>
                                                    <div class="inline-block">
                                                    <div class="bar-used">
                                                        <p>{{totalProt | number : 2}}</p>
                                                    </div>
                                                    <div class="barWrapper">
                                                    <span class="progressText"><B>Eiwitten</B><a class="unitOfMeasure"> (Gr.)</a></span>
                                                        <div class="progress">
                                                            <div class="progress-bar" role="progressbar"  ng-class="{'on-top' : (getPercentageMeal('proteinscore') > 96 && getPercentageMeal('proteinscore') < 104)  , 'to-high' : getPercentageMeal('proteinscore') > 110 , 'on-edge' : (getPercentageMeal('proteinscore') >= 104 && getPercentageMeal('proteinscore') < 110) } " ng-style="{width : ( getPercentageMeal('protein') + '%' ) }" aria-valuemin="0" aria-valuemax="100" >   
                                                                    <span ng-show="currentProtein > 0" class="popOver" data-toggle="tooltip" data-placement="top"><span ng-show="currentProtein > 0">+</span>{{currentProtein | number : 2}} </span>     
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="bar-counter">
                                                        <p>{{user.proteins | number : 2}}</p>
                                                    </div>
                                                    </div>
                                                    <div class="inline-block">
                                                    <div class="bar-used">
                                                        <p>{{totalFat | number : 2}}</p>
                                                    </div>
                                                    <div class="barWrapper">
                                                    <span class="progressText"><B>Vetten</B><a class="unitOfMeasure"> (Gr.)</a></span>
                                                        <div class="progress">
                                                            <div class="progress-bar" role="progressbar" ng-class="{'on-top' : (getPercentageMeal('fatscore') > 96 && getPercentageMeal('fatscore') < 104)  , 'to-high' : getPercentageMeal('fatscore') > 110 , 'on-edge' : (getPercentageMeal('fatscore') >= 104 && getPercentageMeal('fatscore') < 110) } " ng-style="{width : ( getPercentageMeal('fat') + '%' ) }" aria-valuemin="0" aria-valuemax="100" >   
                                                                    <span  ng-show="currentFat > 0"   class="popOver" data-toggle="tooltip" data-placement="top"><span ng-show="currentFat > 0">+</span>{{currentFat | number : 2}} </span>        
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="bar-counter">
                                                        <p>{{user.fats | number : 2}}</p>
                                                    </div>
                                                    </div>
                                            </div>
                                    </div>
                                    <!-- Tab panels -->
                                    <div class="tab-content">
                                        <!--Panel 1-->
                                        <div class="tab-pane panel31 fade" role="tabpanel">
                                            <section class="section products-main">
                                                <div class="row">
                                                    <div class="col-lg-3 col-md-6 mb-r">
                                                        <div class="card collection-card z-depth-1-half">
                                                            <div class="view hm-zoom">
                                                                <img src="https://www.ah.nl.kpnis.nl/static/recepten/img_005186_445x297_JPG.jpg" class="img-fluid" alt="">
                                                                <div class="stripe dark">
                                                                    <a id="receptTitle">
                                                                        <p>Pasta's<i class="fa fa-chevron-right"></i></p>
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-3 col-md-6 mb-r">
                                                        <div class="card collection-card z-depth-1-half">
                                                            <div class="view hm-zoom">
                                                                <img src="http://www.ah.nl.kpnis.nl/static/recepten/img_014663_445x297_JPG.jpg" class="img-fluid" alt="">
                                                                <div class="stripe light">
                                                                    <a id="receptTitle">
                                                                        <p>Stampot <i class="fa fa-chevron-right"></i></p>
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-3 col-md-6 mb-r">
                                                        <div class="card collection-card z-depth-1-half">
                                                            <div class="view hm-zoom">
                                                                <img src="http://www.ah.nl.kpnis.nl/static/recepten/img_002105_445x297_JPG.jpg" class="img-fluid" alt="">
                                                                <div class="stripe dark">
                                                                    <a id="receptTitle">
                                                                        <p>Italiaans <i class="fa fa-chevron-right"></i></p>
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-3 col-md-6 mb-r">
                                                        <div class="card collection-card z-depth-1-half">
                                                            <div class="view hm-zoom">
                                                                <img src="http://www.ah.nl.kpnis.nl/static/recepten/img_082676_445x297_JPG.jpg" class="img-fluid" alt="">
                                                                <div class="stripe light">
                                                                    <a id="receptTitle">
                                                                        <p>Rijst <i class="fa fa-chevron-right"></i></p>
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-lg-3 col-md-6 mb-r">
                                                        <div class="card collection-card z-depth-1-half">
                                                            <div class="view hm-zoom">
                                                                <img src="http://www.ah.nl.kpnis.nl/static/recepten/img_070447_445x297_JPG.jpg" class="img-fluid" alt="">
                                                                <div class="stripe dark">
                                                                    <a id="receptTitle">
                                                                        <p>Salade's<i class="fa fa-chevron-right"></i></p>
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-3 col-md-6 mb-r">
                                                        <div class="card collection-card z-depth-1-half">
                                                            <div class="view hm-zoom">
                                                                <img src="http://www.ah.nl.kpnis.nl/static/recepten/img_057462_445x297_JPG.jpg" class="img-fluid" alt="">
                                                                <div class="stripe light">
                                                                    <a id="receptTitle">
                                                                        <p>Vegetarisch <i class="fa fa-chevron-right"></i></p>
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-3 col-md-6 mb-r">
                                                        <div class="card collection-card z-depth-1-half">
                                                            <div class="view hm-zoom">
                                                                <img src="http://www.ah.nl.kpnis.nl/static/recepten/img_011189_445x297_JPG.jpg" class="img-fluid" alt="">
                                                                <div class="stripe dark">
                                                                    <a id="receptTitle">
                                                                        <p>Vis<i class="fa fa-chevron-right"></i></p>
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-3 col-md-6 mb-r">
                                                        <div class="card collection-card z-depth-1-half">
                                                            <div class="view hm-zoom">
                                                                <img src="http://www.ah.nl.kpnis.nl/static/recepten/img_004078_445x297_JPG.jpg" class="img-fluid" alt="">
                                                                <div class="stripe light">
                                                                    <a id="receptTitle">
                                                                        <p>Soepen <i class="fa fa-chevron-right"></i></p>
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </section>
                                            <section class="section products-chooser">
                                            </section>
                                        </div>
                                        <div class="tab-pane panel32 fade in active" role="tabpanel">
                                            <section class="section" ng-class="{'not-active' : activatedProductModal !== 1 }">
                                                <div class="row">
                                                <div class="md-form search-block productSearch col-md-3">
                                                    <div id="scrollable-dropdown-menu">
                                                        <i class="fa fa-search prefix"></i>
                                                        <input type="text" placeholder="Zoek uw product.." ng-model="selectedProduct" typeahead-on-select="addProducts(selectedProduct,activatedTimeOfDay)"
                                                            uib-typeahead="product as product.productDescription + ' (' + getProductType(product.productCategory) + ')' for product in products| filter:{'productDescription':$viewValue}  | limitTo:60"
                                                            id="productSearch" class="form-control">
                                                        <label for="productSearch" class="active">Zoeken</label>
                                                    </div>
                                                </div>
                                                    <div class="col-md-9">
                                                        <h2 class="MenuTitle"> Maaltijd {{activatedTimeOfDay}}</h2>
                                                    </div>
                                                </div>
                                                <div class="carousel-container chosen-menu">
                                                    <div ng-repeat="product in selectedProducts track by $index">
                                                        <div class="product-item-wrapper">
                                                            <div class="item product-item"><img ng-src="{{product.image? product.image:'images/Bendd.jpg'}}"
                                                                    onerror="imgError(this);" style=" float:left;width:150px;height:150px;"
                                                                    ng-class="{'grayed': product.tags === 'placeholder'}">
                                                                <div class="item-pills">
                                                                    <!-- Nav tabs -->
                                                                    <ul class="nav nav-chosen">
                                                                        <li class="nav-item">
                                                                            <div class="column medium-12 text-center">
                                                                                <div class="stepper">
                                                                                    <button class="sub" ng-disabled="product.calculated < 1" ng-click="substract(product)"><i class="fa fa-minus"></i></button>
                                                                                    <input class="productCalculated" restrict-to="[0-9]" type="number"  ng-change="checkWeight(product, '{{product.calculated}}')"  ng-model="product.calculated">
                                                                                    <button class="add" ng-click="add(product)"><i class="fa fa-plus"></i></button>
                                                                                </div>
                                                                            </div>
                                                                        </li>
                                                                        <li class="nav-item">
                                                                            <div class="nav-link active left-right-button">
                                                                                <div class="left" ng-click="leftUnit(product)">
                                                                                    <i class="fa fa-chevron-left"/>
                                                                                </div>
                                                                                <div class="unit unit-center">{{product.unit}}                                                                                 
                                                                                </div>
                                                                                <div class="right" ng-click="rightUnit(product)">
                                                                                    <i class="fa fa-chevron-right"></i>         
                                                                                </div>             
                                                                            </div>
                                                                       </a>
                                                                        </li>
                                                                        <li class="nav-item" ng-show="product.tags === 'placeholder'">
                                                                            <a class="nav-link active searchable" data-toggle="tab" role="tab">
                                                                                <p>zoek uit lijst</p><i class="fa fontawesome-arrow-right fa-2x"></i></a>
                                                                        </li>
                                                                        <li class="nav-item" ng-hide="product.tags === 'placeholder'">
                                                                           <a class="nav-link active" ng-click="removeProduct(product,activatedTimeOfDay)" data-toggle="tab" role="tab"><i class="fa fa-remove fa-2x"></i></a>
                                                                        </li>
                                                                    </ul>
                                                                </div>
                                                                <div class="product-label"><label>{{product.productDescription}}({{getProductType(product.productCategory)}})</label></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <!--<div class="productHeaderGroup">
                                                    <div class="row">
                                                        <div class="col-md-3">
                                                            <h4 class="productHeaderTitle">Product
                                                            </h4>
                                                        </div>
                                                        <div class="col-md-2">
                                                            <h4 class="productHeaderTitle">Groep
                                                            </h4>
                                                        </div>
                                                        <div class="col-md-2" > 
                                                            <h4 class="productHeaderTitle">Eenheid
                                                            </h4>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="productListGroup">
                                                <ul ng-repeat="product in selectedProducts track by $index">
                                                    <li>
                                                        <div class="row">
                                                            <div class="col-md-3 productHeader">
                                                                <h4 class="productProductDescription">{{product.productDescription}}
                                                                </h4>
                                                            </div>
                                                            <div class="col-md-2 productHeader">
                                                                <h4 class="productProductDescription">{{product.productGroup}}
                                                                </h4>
                                                            </div>
                                                            <div class="col-md-3 productHeader">
                                                                <div class="btn-group">
                                                                    <button type="button" class="btn btn-info btn-cat" aria-placeholder="kies een categorie">gram</button>
                                                                    <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                                    <span class="caret"></span>
                                                                    <span class="sr-only">Toggle Dropdown</span>
                                                                    </button>
                                                                    <ul class="dropdown-menu pull-right">
                                                                        <li  ng-repeat="group in recipeGroups"><a ng-click="dropboxitemselected(group)">{{group.description}}</a></li>
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </li>
                                                </ul>
                                                </div>-->
                                            </section>    
                                                                   
                                        </div>
                                        <div class="tab-pane panel33 fade" id="panel33" role="tabpanel">
                                            <br>
                                            <p class="info-message">Op dit moment is er nog geen product aan te bevelen.
                                            </p>
                                        </div>
                                        <div class="tab-pane panel34 fade" class="panel34" role="tabpanel">
                                            <ul ng-repeat="recipe in recipes  track by $index">
                                                <li>
                                                    <div class="media" style="display:inline-block;">
                                                        <a class="media-left waves-light">
                                                            <img class="img-circle" style="width:100px;height:100px;" src="/images/lasagna.jpg" alt="foodPicture">
                                                        </a>
                                                        <div class="media-body" style="width:450px;">
                                                            <div class="productHeader">
                                                                <h4 class="media-heading productProductDescription">{{recipe.description}}
                                                                </h4>
                                                            </div>
                                                            <h5 class="media-subheading">{{recipe.shortDescription}}</h5>
                                                            <p><b>100gr</b> / Kcal:{{(recipe.energy / recipe.weight * 100).toFixed(0)}}
                                                                Vetten: {{(recipe.fats / recipe.weight * 100).toFixed(0)}}
                                                                Koolhydraten: {{(recipe.carbohydrates / recipe.weight * 100).toFixed(0)}}
                                                                Eiwitten: {{(recipe.proteins / recipe.weight * 100).toFixed(0)}}</p>
                                                        </div>
                                                        <div style="display:table-cell;padding-top:30px;">
                                                            <a class="btn btn-default recipeAdd" ng-click="addRecipe(recipe,activatedTimeOfDay)"><i class="fa fa-plus left"></i> Kies</a>
                                                            <a class="btn btn-default recipeInfo" data-toggle="modal" data-target="#centralModalInfo"><i class="fa fa-info left"></i> Info</a>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--Footer-->
                        <div class="modal-footer">
                            <div class="menuInfo" style="text-align:left;">
                                <div style="width:100%;display:inline-block">
                                    <div class="productSum">KCal: {{totalCal}}</div>
                                    <div class="productSum" id="fatInfo">Vetten: {{totalFat}}</div>
                                    <div class="productSum" id="carboInfo">Koolhydraten: {{totalCarbo}}</div>
                                    <div class="productSumEnd" id="protInfo">Eiwitten: {{totalProt}}</div>
                                </div>
                            </div>
                            <button type="button" class="btn btn-danger" data-dismiss="modal" tabindex="3" ng-click="dismissMenu(activatedTimeOfDay)">Verwijder</button>
                            <button type="button" class="btn btn-primary" ng-click="storeMeal(selectedProducts, activatedTimeOfDay, activeMicros)" tabindex="2">Opslaan</button>
                        </div>
                    </div>
                    <!--/.Content-->
                </div>
            </div>
            <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <!--Content-->
                    <div class="modal-content">
                        <!--Header-->
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                            <h4 class="modal-title" id="myModalLabel">Verwijderen</h4>
                        </div>
                        <!--Body-->
                        <div class="modal-body">
                            {{message}}
                        </div>
                        <!--Footer-->
                        <div class="modal-footer">
                            <button type="button" class="btn btn-danger" data-dismiss="modal">Annuleer</button>
                            <button type="button" class="btn btn-primary" ng-click="deleteMenuToday()">Verwijder</button>
                        </div>
                    </div>
                    <!--/.Content-->
                </div>
            </div>
            <div class="modal fade" id="benddItModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <!--Content-->
                    <div class="modal-content">
                        <!--Header-->
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                            <h4 class="modal-title" id="myModalLabel">Bendd-It</h4>
                        </div>
                        <!--Body-->
                        <div class="modal-body">
                            {{message}}
                        </div>
                        <!--Footer-->
                        <div class="modal-footer">
                            <button type="button" class="btn btn-danger" data-dismiss="modal">Annuleer</button>
                            <button type="button" class="btn btn-primary" ng-click="benddTheMenu()">Bendd-it</button>
                        </div>
                    </div>
                    <!--/.Content-->
                </div>
            </div>
                <div class="modal fade" id="centralModalInfo" backdrop="false" tabindex="-1" role="dialog" aria-labelledby="centralModalInfo" aria-hidden="true">
                    <div class="modal-dialog modal-full-height modal-right" role="document">
                    <!--Content-->
                    <div class="modal-content">
                        <!--Header-->
                        <div class="modal-header">
                            <p class="heading lead"></p>
                        </div>

                        <!--Body-->
                        <div class="modal-body">
                            <div class="text-center">
                                <i class="fa fa-cutlery fa-4x mb-1 animated rotateIn"></i>
                                <h2>Bereidingswijze</h2>
                                <p>- ingredienten</p>
                            </div>
                        </div>

                        <!--Footer-->
                        <div class="modal-footer justify-content-center">
                            <a type="button" class="btn btn-primary-modal">Boodschappenlijst<i class="fa fa-shopping-cart ml-1"></i></a>
                            <a type="button" class="btn btn-outline-secondary-modal waves-effect" data-dismiss="modal">Ok</a>
                        </div>
                    </div>
                    <!--/.Content-->
                </div>
            </div>
this is the html.

Marta Wierzbicka staff answered 5 years ago


Hi Coen, Could you send me here a code of your page where are these modals? Or paste here link to your demo? It'll be easer for me to help you. Best, Marta

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags