We Keep Coding

trigger modals with commas in data-id, using an anchor with single value in commad list

I have been trying to get this working for hours, including many of those hours searching stackoverflow and elsewhere on google.
I'm using a rather strange setup via wordpress to iterate a number of bootstrap modals with an HTML anchor value associated with a booth number variable. I have a table with some javascript that, if there is a booth number within a given div, triggers a modal. Generally it's working great, except for one issue:
some of these modals have an id value with a comma seperated list. This isn't something I can structurally change right now, so i'm trying to get comma separated values to play nicely with the javascript and grid container i have set up.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".container1 > *[data-location]").click(function() {
var booth = "#" + jQuery(this).data("location");
jQuery(booth).modal({ show: false});
jQuery(booth).modal('show');
console.log(booth);}); });
here's a small chunk of my grid container:
<div class="k10" id="k10" data-id="k10" booth-number="710" data-location="710">710</div>
<div class="k11" id="k11" data-id="k11" booth-number="611" data-location="611">611</div>
<div class="k12" id="k12" data-id="k12" booth-number=""></div>
<div class="k13" id="k13" data-id="k13" booth-number="610" data-location="610">610</div>
<div class="k14" id="k14" data-id="k14" booth-number="511" data-location="511">511</div>
<div class="k15" id="k15" data-id="k15" booth-number=""></div>
<div class="k16" id="k16" data-id="k16" booth-number="510" data-location="510">510</div>
<div class="k17" id="k17" data-id="k17" booth-number="411" data-location="411">411</div>
<div class="k18" id="k18" data-id="k18" booth-number=""></div>
<div class="k19" id="k19" data-id="k19" booth-number="410" data-location="410">410</div>
<div class="k20" id="k20" data-id="k20" booth-number="311" data-location="311">311</div>
and a couple example pieces of my modals:
<div id="613" class="block-3d6e5076-e12d-4c8c-b2e4-185fd546a91a modal fade" tabindex="-1" aria-hidden="true" booth-number="613">
<div id="710, 712" class="block-3d6e5076-e12d-4c8c-b2e4-185fd546a91a modal fade" tabindex="-1" aria-hidden="true" booth-number="710, 712">
the first example being a working one, and the second a non-working one... I am slowly going mad trying to figure this out, i'd love any help y'all can give!

712"` using like this is totally not recommended. You need to create custom classes to particular modals and to the buttons where you trigger them. Just try below snippet you will more clear on it.
$(document).ready(function(){
$(".btn").click(function(){
var modalID = $(this).attr('data-id');
$("."+modalID).modal('show');
});
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="bs-example">
<button type="button" data-id="709" class="btn btn-sm btn-primary">709</button>
<button type="button" data-id="710" class="btn btn-sm btn-primary">710</button>
<button type="button" data-id="712" class="btn btn-sm btn-primary">712</button>
<div class="modal fade 710 712" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">710 Modal Title</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>This is a simple Bootstrap modal. Click the "Cancel button", "cross icon" or "dark gray area" to close or hide the modal.</p>
</div>
</div>
</div>
</div>
<div class="modal fade 709" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">709 Modal Title</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>This is a simple Bootstrap modal. Click the "Cancel button", "cross icon" or "dark gray area" to close or hide the modal.</p>
</div>
</div>
</div>
</div>
</div>

expand menu to expand/collapse all menues regardless if they are expanded or closed

I have 4 expandable menus and 5 buttons. Collapse first button expands/closes the first menu, Collapse second button expands/closes the second menu and so on.
As it is: Button Collapse all for each menu closes it if it is expanded and expands it if it is closed.
Want to be: Whereas I want my Collapse all button to expand all menus if they are closed and don't change them if they are expanded. And then if clicked again closes all the menus that are expanded and don't change the closed menus.
Here is a fiddle I wrote for As it is: expand menu fidlle
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<p>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample1, #collapseExample2, #collapseExample3, #collapseExample4" aria-expanded="false" aria-controls="collapseExample">
Collapse all
</button>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample1" aria-expanded="false" aria-controls="collapseExample">
Collapse first
</button>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample">
Collapse second
</button>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample3" aria-expanded="false" aria-controls="collapseExample">
Collapse third
</button>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample4" aria-expanded="false" aria-controls="collapseExample">
Collapse fourth
</button>
</p>
<div class="collapse" id="collapseExample1">
<div class="card card-body">
hi first
</div>
</div>
<div class="collapse" id="collapseExample2">
<div class="card card-body">
hi second
</div>
</div>
<div class="collapse" id="collapseExample3">
<div class="card card-body">
hi third
</div>
</div>
<div class="collapse" id="collapseExample4">
<div class="card card-body">
hi fourth
</div>
</div>
How can I do it?

A naive solution I can think of now is to bind the collapse all click event via a custom handler that shows or hides all collapsibles based on a state on the collapse all button, instead of via Bootstrap built-in data-toggle="collapse" and data-target="*".
<p>
<button id="toggle-all" class="btn btn-primary" type="button">
Collapse all
</button>
<button class="btn btn-primary" type="button" data-toggle="collapse" ... />
...
</p>
<div class="collapse" />
...
Then in this Collapse all's button click event, you can have a state on this button itself (via data-) to memorize whether to show or hide all collapsibles. And based on that state variable, you can call either .collapse('show') or .collapse('hide') on all collapsibles manually.
The show method won't show a collapsible again if it's already shown. And the hide method won't hide a collapsible if it's already hidden.
$(function() {
$('#toggle-all').click(function() {
// Declare a variable, `data-to-show`, to contain the state whether to show/hide
// all collapsibles.
// It defaults to true, which means it's about to show all.
if (!$(this).data('to-show')) {
$(this).data('to-show', true);
} else {
$(this).data('to-show', !$(this).data('to-show'));
}
if ($(this).data('to-show')) {
$('.collapse').collapse('show');
} else {
$('.collapse').collapse('hide');
}
return false;
});
});
demo: https://jsfiddle.net/davidliang2008/cvy2kbpz/28/
Another better "solution" I can think of is to declare an extra data attribute, maybe something like data-toggle-all-at-the-same-time="true", and override Bootstrap's built-in .collapse() so that when it sees that data attribute being true, it doesn't toggle the target elements which are already toggled?
Sadly I haven't found an easy way to do so, yet.

I would use the toggle function from jQuery. Here is a link to its docs https://api.jquery.com/toggle/
This function hides an element if it is beign shown; or shows it if it is hidden. Simple and works like a charm without many checks.

You need to include jQuery onto your html page. Right at the bottom.
Let this script be the last element within your body tag.
Then you will need to include all the javascript files that come within the boostrap folder (if you have downloaded the folder).
Add the following tags on your script. As mentioned, right before the tag
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

jQuery modal pop up disappears when mouse pointer leaves the browser

I'm working on a reactjs project in which i have nav menus, and i'm using jquery modal pop up, one of my menus is "Import" which contains two sub menus "CCAWB & GAWB" i'm using react component to render these two submenus under "Import"
<li className="has-submenu">
<a href="#">
<span>Import</span>
</a>
<ul className="submenu">
<li>
<ul>
<RenderCCAWB_GAWBPopUp submenu ="CCAWB"/>
<RenderCCAWB_GAWBPopUp submenu ="GAWB"/>
</ul>
</li>
</ul>
</li>
RenderCCAWB_GAWBPopUp Component returns the following
render(){
return(<li onClick={this.handleShowModal}>
{this.props.submenu}
{this.state.view.showModal ? <UpdateQualityHeaderDummy
handleHideModal={this.handleHideModal} menuName={this.props.submenu} />:null}
</li>);}
on click of any of the sub menus "CCAWB/GAWB" i want to show the modal pop up
which's returned by another component
UpdateQualityHeaderDummy returns the modal itself
return (
<div className="modal" data-backdrop='static' id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div className="modal-dialog" >
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title" id="exampleModalLabel">{title}</h5>
<button onClick={this.closePop} type="button" className="close"
data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div className="modal-body">
<div className="row">
<div className=" col-lg-12 col-xl-12
qcUpdateStatus">
</div>
<FileUpload menuTitle={this.props.menuName}/>
</div>
</div>
<div className="modal-footer">
<button type="button" className="btn btn-secondary" data-dismiss="modal" onClick ={this.closePop}>Close</button>
<button type="button" className="btn btn-danger" data-dismiss="modal" onClick ={this.downloadFeed}>Download Feed</button>
<button type="button" className="btn btn-primary" onClick={this.validateForm}> Upload </button>
</div>
</div>
</div>
</div>);
} });
till here everything works fine and the modal shows up as attached bellow
[Screen 1 for the scenario ][1]
*= > the problem is here, whenever the mouse pointer leaves the browser (i.e goes to the url bar) the modal and the sub menus disappear but the modal opacity stays there (attached bellow)
Screen 2 when the pointer is outside the page
*= >but they show up immediately as soon as the pointer is back to the page (any where)
attached bellow screen 3
Screen 3 when the pointer is inside the page
*=> my trials: i have tried the event mouseleave(when mouse leaves the browser) and set the visibility of the sub menus as visible but they keep disappearing i even set the modal show property as true in the same event but also doesn't work.
$(document).mouseleave(function () {
$('.modal').css('visibility','visible');
$('#navigation > div > ul > li:nth-child(5) >
ul').css('visibility','visible');
$('#myModal > div').css('visibility','visible');
$('#myModal > div > div').css('visibility','visible');});
any suggestions please ?

Binding repeated divs with a bit different contents in the divs

I'm working on repeated divs that there are some changes within them. Let say I have some buttons on my page that open a modal dialog when being clicked. However, the content within the modal is a bit different for each button. I mean 80% of what inside the modal is repeatedly used across those button and the remaining 20% changes according to each specific button.
I'm tired of duplicating the whole div (modal) and making just small changes to fit each button because I currently have 24 buttons on the page and the number is increasing in the near future.
So, I'm asking if there's an excellent way to cope with this issue. Thank you all.
ps. Sorry if I'm not so clear in explaining the problem. Just a newbie here lol.

Point all of the buttons to a template modal, and then when a button is clicked, modify the template modal with the dynamic information. You can store the dynamic information in an array of objects, or you could create a system for storing the dynamic information in the HTML, but hidden.
For example:
var contents = [{
title: "Header 1",
body: "Body 1"
},{
title: "Header 2",
body: "Body 2"
}];
$("button[id^=modal]").click(function() {
var content = contents[this.id.substring(5) - 1]; // id gives index of content in array
$("#myModal .modal-title").html(content.title);
$("#myModal .modal-body").html(content.body);
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<button id="modal1" type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal 1</button>
<button id="modal2" type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal 2</button>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><!--Template Title--></h4>
</div>
<div class="modal-body"><!--Template Body--></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
JSFiddle

How make a Bootstrap modal with scrollable content and max height?

I have a modal with a large content in it.
So I want the modal be the max-hight of my window and the content should be scrollable within the modal.
This is what my modal is right now:
<div class="modal fade" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span>×</span></button>
<h4 class="modal-title">Error Log: {{ log_name }}</h4>
</div>
<div class="modal-body">
<pre>
{{ log_content }}
</pre>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning pull-left" ng-click="clear_log( )"><span class="glyphicon glyphicon-trash"></span></button>
<button type="button" class="btn btn-default pull-left" ng-click="refresh_log( )"><span class="glyphicon glyphicon-refresh"></span></button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
Thank you.

With pure CSS it's not possible, you can achieve the dynamic height of modal according to window size with following piece of script with suggested answer CSS in comments;
Script
$('#myModal').on('show.bs.modal', function () {
$('pre').css('height',$( window ).height()*0.9);
});
CSS
.modal-body {
overflow-y: auto;
}
Fiddle
Note: You have to adjust the height and may be the target class which you want to be with dynamic height, in example I target pre you can also try with $('.modal-body').css('height',$( window ).height()*0.9); which ever suits your need and according to design.
Or you can totally remove CSS suggested above and set the height in JS like as follow;
$('pre').css('height',$( window ).height()*0.6);
For Remote Modals
With remote modals above solutions will not work so with remote modals if you want to adjust the height of the selector e.g modal-body then following script and CSS can do the trick with bootstrap modal loaded event
$('#myModal').on('loaded.bs.modal', function () {
$('pre').css('height',$( window ).height()*0.6);
});
CSS
.modal-body {
overflow-y: auto;
}
Bootstrap Modal events Functions