Develop Reference

Styles on elements inside modal-body aren't being applied

If I show the modal as written below and without tampering with it after releasing and running my web application, the divLocation style is applied to the "Germany" text, e.g. it gets a red background.
If I press a button, remove <div class="divLocation">Germany</div> and add instead <div class="divLocation">Belgium</div> before showing my modal, no red background is being added (although Chrome shows that the HTML is the same).
What am I missing?
var wndLocationsDiv = document.getElementById("wndLocations").getElementsByClassName("modal-body")[0];
var divContainerCurrentLocation = document.createElement("div");
divContainerCurrentLocation.classList.add("divLocation");
divContainerCurrentLocation.innerHTML = 'Belgium';
wndLocationsDiv.appendChild(divContainerCurrentLocation);
html,
body {
min-height: 100vh;
}
.divLocation {
background: red !important;
border-radius: 34px !important;
border: 1px solid !important;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="modal fade show" id="wndLocations" tabindex="-1" role="dialog" aria-labelledby="wndLocationsCenterTitle" aria-hidden="true" style="display: block;">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="wndLocationsLongTitle">Locations</h5>
</div>
<div class="modal-body">
<div class="divLocation">Germany</div>
</div>
<div class="modal-footer modalFooter">
<button type="button" class="btn btn-primary primaryActionBackground" data-bs-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
<div id="bingMap" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
The thing is that the snippet above works. How can I find out what else is intervening and preventing the update with "Belgium" at runtime?
UPDATE
I added a div to the end of the page, which exists in my (more extended) project and envelops a Bing map.
I've already had some problems with the map "interfering" with my layout, could that be a factor?

Set Cookie on Button [duplicate]

This question already has answers here:
Call back function in modal of bootstrap3
(5 answers)
How do I set local storage on a bootstrap modal?
(1 answer)
Closed 2 years ago.
I made a fullscreen overlay with a popup. Now when I press the button I want a popup to be set. You can also click outside the window. Then the popup disappears. I want a cookie to be set there as well. Somehow I do not understand the whole thing. Here is my code:
$(function() {
$("#custom-modal").modal("show");
});
/* Close the popup when the a selection is made */
$("#selectCity").on("change", function() {
$("#custom-modal").modal("hide");
});
$.modal({
// enable/disable cookies
cookie: true,
// cookie name
cookieName: 'eisstadion',
// enable/disable cookie session
cookieSession: true,
// expire time
cookieExpires: 30,
// cookie path
cookiePath: '/'
});
<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.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- A Bootstrap Modal -->
<div id="custom-modal" 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">Achtung!</h4>
</div>
<div class="modal-body">
Ab sofort nur noch Online die Tickets
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Hier gehts zum Shop</button>
</div>
</div>
</div>
</div>

Storing and using a cookie from a checkbox state

I am working on the following code. How can I use JS Cookie to not display the popup if a user checked the checkbox?
setTimeout(function() {
$("#myModal").modal('show');
}, 1000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<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">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<div class="pull-left"><input id="checkBox" type="checkbox"> No Display Next Times</div>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

This works for me, although the cookie part seems to only run on Firefox. I can't seem to be able to set the cookie in Chrome... a security setting maybe?
<script>
setTimeout(function() {
// Read cookie
var show = getCookie('show');
// Check cookie value
if(show == 1 || show == '')
$("#myModal").modal('show');
}, 1000);
// This runs when the modal window is hidden
$('#myModal').on('hidden.bs.modal', function (e) {
// Save check box to cookie
if(document.getElementById("mycheckBox").checked) {
document.cookie = "show=0";
} else {
document.cookie = "show=1";
}
})
// Nice function to read a specific cookie value
function getCookie(name) {
var value = "; " + document.cookie;
var parts = value.split("; " + name + "=");
if (parts.length == 2)
return parts.pop().split(";").shift();
else
return '';
}
</script>

How to close & open a modal like Bootstrap

I want to create a modal like Bootstrap ...
I have wrote this codes :
<button type="button" data-target="#myModal" class="btn btn-primary">Open Modal</button>
<div class="modal fadeIn" id="myModal">
<div class="modal-header">
Roj Framework <span class="close-btn">×</span>
</div>
<div class="modal-content">
Hi, This Roj Framework !
</div>
<div class="modal-footer">
Continue ...
</div>
</div>
But I have a problem in understanding how to close & open it. I put a data-target for button to match with Modal Box ID & I don't display the modal from the beginning ..., So I wrote this code but It doesn't work ...
$('.modal').css('display', 'none');
$('button').click(function(){
var boxID = $(this).data('target');
var modalBox = $('.modal');
var modalBoxAttr = modalBox.attr('id');
if('boxID' == 'modalBoxAttr') {
modalBox.css('display', 'block');
}
});

There a few mistakes with your code.
Mistake 1:
Here:
if('boxID' == 'modalBoxAttr')
You are currently checking the strings and not the objects. What you have written is the following:
If the string "boxId" is equal to the string "modalBoxAttr" do something. And both strings are not the same, so you get a false result.
Mistake 2:
You are complicating the code too much.
You can just simplify it like this.
$('button').click(function(){
var boxID = $(this).data('target');
var boxObject = $(boxID);
if(boxObject.length) {
boxObject.toggle();
}
});
.modal { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" data-target="#myModal" class="btn btn-primary">Open Modal</button>
<div class="modal fadeIn" id="myModal">
<div class="modal-header">
Roj Framework <span class="close-btn">×</span>
</div>
<div class="modal-content">
Hi, This Roj Framework !
</div>
<div class="modal-footer">
Continue ...
</div>
</div>
Use more often console.log() to debug your code and check if you are actually entering a specific section and if your logic is correct.

Try following approach.
Remove data-target="#myModal" from button
<button type="button" class="btn btn-primary">Open Modal</button>
Button click:
$('button').click(function(){
$("#myModal").modal('show');
}});

how can i create a modal by remote and initial textbox in the same function using jquery?

script.js
function change_val(){
$("#remoteModal2").modal({
remote:"modals/edit_text_value.html",
show:true
});
$("#my_textbox").val("this is a text")
}
index.html
<div class="modal fade" id="remoteModal2" tabindex="-1" role="dialog" aria-labelledby="remoteModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
<button onclick="change_val()" >show modal</button>
edit_text_value.html
<div class="modal-header">
header
</div>
<div class="modal-body">
<textarea id="my_textbox"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">cancel</button>
</div>
The problem is that I must run it twice to make it work !
How to do all the operations in a function ?

shown.bs.modal OR show.bs.modal
When we use this code :
.on('shown.bs.modal')
.
$('#remoteModal2').on('shown.bs.modal', function (e) {
$("#my_textbox").val("this is a new text);
return e.preventDefault();
});
import modal (remote "edit_text_value.html")
Open modal
After the completion of loading and effects , change value..
show new value...
But this code :
.on('show.bs.modal')
Apply the changes ,Before reading the tags and remote the modal...
Therefore, it is not effective.
Because it can not find this ID (#my_textbox) Before remote modal page!
more information...