Topic: Modal with (another) side modal
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
Add comment
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">×</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">×</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">×</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>
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Specification of the issue
- ForumUser: Pro
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Tags