Develop Reference

How to specify API objects in Bootstrap 5 modal?

I'cant get this straight, been on this for quite some time. Basically, I'm on this movie app and need a modal. So far I got to point to show each movie individually, show their poster, title and score.
Now, the idea is to press on title and modal will pop up with description ${overview}. Okay, it works, BUT! Modal only shows first object's description, no matter on which movie's title I press.
Once you remove a modal and add a <div>${overview}</div> it works, shows description of each movie correctly, but once I put it in modal - won't work.
I tried to play around with on click with that button, googled all around but can't find a solution. Any help or direction would be amazing, thank you!
Please see code here: https://github.com/sscip/movie-app-ms2

You need change data-bs-target to bind different button and modal.
movies.forEach((movie) => {
const {poster_path, title, vote_average, overview, uid} = movie; // Pulling necessary names from API
console.log(overview)
const movieBox = document.createElement("div"); //creating a div for individual movie elements
movieBox.classList.add("movie"); // creating a class for it
movieBox.innerHTML = `
<div class="movie-image"><img src="${IMGPath + poster_path}" alt="${title}" /></div>
<div class="movie-info">
<button type="button" class="btn" data-bs-toggle="modal" data-bs-target="#${uid}">
${title}
</button>
<span class="${classByRating(vote_average)}">${vote_average}</span>
<div class="modal fade" id="${uid}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">${title}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
${overview}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
`; // creating markup for every movie element and pulling information from API
mainSection.appendChild(movieBox); // sending back to HTML file
});
varying-modal-content

Yeah you were basically missing two things:
Text color for the modal content
Unique id for each button and modal
Here is a working solution:
P.S: You can also check it at on JSfiddle here.
// API link with key, please follow readme how to create own API key for application to work.
const APIKey = 'dontreallyneedit';
const APIURL = "https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=" + APIKey + "&page-1";
const IMGPath = "https://image.tmdb.org/t/p/w1280";
const SearchAPI = "https://api.themoviedb.org/3/search/movie?&api_key=" + APIKey + "&query=";
const mainSection = document.getElementById("main-section"); // selecting DOM element to work with
const searchForm = document.getElementById("search-form");
const searchInput = document.getElementById("search-field");
movies(APIURL); // calling popular movies funcion to work
async function movies(url) {
/* const resp = await fetch(url);
const respData = await resp.json(); */
const results = [{
poster_path: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTP4mb3V7kJHqWTf5GUr-wHUOfHaTv71Ypf3-WGYqjJr-OpYPJslwk2IYY-Phi4hGxpfFQ&usqp=CAU",
title: "Movie 1",
vote_average: 5,
overview: "Great Overview One!"
},
{
poster_path: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTP4mb3V7kJHqWTf5GUr-wHUOfHaTv71Ypf3-WGYqjJr-OpYPJslwk2IYY-Phi4hGxpfFQ&usqp=CAU",
title: "Movie 2",
vote_average: 4,
overview: "Great Overview Two!"
},
{
poster_path: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTP4mb3V7kJHqWTf5GUr-wHUOfHaTv71Ypf3-WGYqjJr-OpYPJslwk2IYY-Phi4hGxpfFQ&usqp=CAU",
title: "Movie 3",
vote_average: 3,
overview: "Great Overview Three!"
}
];
showMovies(results);
}
function showMovies(movies) {
mainSection.innerHTML = ""; // clearing page to show new reults
movies.forEach((movie, index) => {
const {
poster_path,
title,
vote_average,
overview
} = movie; // Pulling necessary names from API
const movieBox = document.createElement("div"); //creating a div for individual movie elements
movieBox.classList.add("movie"); // creating a class for it
movieBox.innerHTML = `
<div class="movie-image"><img src="${poster_path}" alt="${title}" /></div>
<div class="movie-info">
<button type="button" class="btn" data-bs-toggle="modal" data-bs-target="#exampleModal_${index}">
${title}
</button>
<span class="${classByRating(vote_average)}">${vote_average}</span>
<div class="modal fade" id="exampleModal_${index}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">${title}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
${overview}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
`; // creating markup for every movie element and pulling information from API
mainSection.appendChild(movieBox); // sending back to HTML file
});
}
function classByRating(vote) { //checking how high is the movie rating and giving apropriate class name.
if (vote >= 8) {
return "green";
} else if (vote >= 5) {
return "amber"
} else {
return "red";
}
}
searchForm.addEventListener("submit", (i) => {
i.preventDefault();
const searchTerm = searchInput.value;
if (searchTerm) {
movies(SearchAPI + searchTerm)
searchInput.value = "";
}
})
#import url('https://fonts.googleapis.com/css2?family=Lato:wght#100;300&display=swap');
.modal-content {
color: black;
}
/* Main Styles */
* {
box-sizing: border-box;
font-family: 'Lato', serif;
}
/* Navigation */
header {
background-color: #D16BA5;
padding: 1rem 0.5rem;
}
header a {
font-size: 1.5rem;
}
header button:focus {
outline: none;
}
#navbar-brand {
font-size: 1.7rem;
}
#search-field {
border-radius: 10px;
font-size: 1.2rem;
border: none;
}
.search-btn:focus {
outline: none;
}
.search-btn:active {
background-color: #FF8F80;
}
.search-btn {
font-size: 1.2rem;
padding: 0 1rem;
border: none;
border-radius: 10px;
color: #eee;
background-color: #FF8F80;
}
/* Main section styling */
#main-section {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
/* Movies Box styling */
.movie {
margin: 0.7rem;
width: 15rem;
border-radius: 5px;
background-color: #FF8F80;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
overflow: hidden;
}
/* Movie image */
.movie img {
max-width: 100%;
}
/* Movie Basic info */
.movie-info {
display: flex;
justify-content: space-between;
color: #eee;
padding: 0.5rem;
align-items: center;
max-height: 100%;
}
.movie-info h3 {
margin: 0;
font-size: 1.21rem;
}
.movie-info span {
background-color: #D16BA5;
padding: 0.5rem;
border-radius: 5px;
width: 2.5rem;
height: 2.5rem;
text-align: center;
font-weight: bold;
}
.movie-info span.green {
color: rgb(0, 214, 54);
}
.movie-info span.amber {
color: rgb(255, 163, 87);
}
.movie-info span.red {
color: rgb(223, 45, 0);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Title -->
<title>Movies TOP-20 LIVE!</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Font Awesome 5 -->
<script src="https://kit.fontawesome.com/0d4c39c5bf.js" crossorigin="anonymous"></script>
<!-- Custom CSS -->
<link rel="stylesheet" href="assets/css/styles.css" />
<!-- Custom JS -->
<script src="assets/js/config.js" type="text/javascript" defer></script>
<script src="assets/js/script.js" type="text/javascript" defer></script>
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" id="navbar-brand" href="#">Movies TOP-20 LIVE</a>
<button class="navbar-toggler" id="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
<form class="d-flex" id="search-form">
<input class="form-control me-2" id="search-field" type="search" placeholder="Search" aria-label="Search">
<button class="search-btn" id="search-btn" type="submit">
Search
</button>
</form>
</div>
</div>
</nav>
</header>
<section id="main-section"></section>
<!-- Bootstrap 5 JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>

Modal does not close, when clicked

So I have a menu, where models pop-up on click. In each model, there's a close button, marked by an "x". Only problem is, that the model does not close, when the "x" is clicked.
I have tried multiple ways of filing this seemingly simple problem. But with no luck.
I have tried, using a z-index property, I have tried fiddling with the divs. I have tried to link to bootstrap external links. I have tried different kind of "close" button. I have tried to modifying the javascript code. Still I have not arrived at the desired outcome. Can anyone help ?
Here's my code
window.onload = function () {
list = document.querySelectorAll(".Project");
for (let i = 0; i < list.length; i++) {
list[i].addEventListener("click", function (e) {
e.preventDefault();
let currentElement = e.target.parentNode;
let modalId = currentElement.dataset.modal;
let modal = document.getElementById(modalId);
modal.style.display = "block";
});
}
};
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
<li class="Project" data-modal="myModal_1">
<span id="myBtn_1"> Wer Baut Der Stadt </span>
<span id="year"> 2019 </span>
<div class="Describtion">
<p style="display:none;">
Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin.
</p>
</div>
<div id="myModal_1" class="modal">
<div class="modal-content">
<img src="Images/WER BAUT 2018/HVIDAktiv 20.png" width="1000px">
<span class="close">× </span>
<p> Some text in the Modal..1 </p>
</div>
</div>
</li>

It is very easy to use modal in Bootstrap.
You just have to make sure that, as in the example below, jquery.js, popper.js and bootstrap.js are placed in order.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

this is because you have a bad use of JS event delegation.
the corect way is tu use the matches method https://developer.mozilla.org/en-US/docs/Web/API/Element/matches
like this :
window.onload = function () {
list = document.querySelectorAll(".Project");
document.querySelectorAll(".Project").forEach(LIelm=>{
LIelm.addEventListener('click', showHideModal)
})
};
function showHideModal(e) {
if (!e.target.parentNode.matches('.Project , .modal-content' )) return
e.preventDefault();
let currentParent = e.target.parentNode;
if (currentParent.matches('.Project') ){
document.getElementById( currentParent.dataset.modal ).style.display = "block";
}
else {
currentParent.parentNode.style.display = "";
}
}
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
<li class="Project" data-modal="myModal_1">
<span id="myBtn_1"> Wer Baut Der Stadt ee</span>
<span id="year"> 2019 </span>
<div class="Describtion">
<p style="display:none;">
Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin.
</p>
</div>
<div id="myModal_1" class="modal">
<div class="modal-content">
<img src="https://picsum.photos/200/300" >
<span class="close">× </span>
<p>Some text in the Modal..1
</p>
</div>
</div>
</li>

Modal text is repeting in other modals

I am doing a project where I have a table with several rows and in one of the columns of the table I have buttons that when clicked show a modal.
This modal has a input and a div where the input written will appear.
The problem is what I write in a single modal appears in the other modals.
Is there a way to make them "independent"? Below is the code I have written.
When you run the snippet below, that's something like that that appears in the
modal. And the text that you write in the input and goes to the div, is what is repeating in all the modals.
$(document).ready(function() {
// send message to modal if message is empty do not send anything or if it is only spaces
$("#sendMessage").click(function() {
if ($.trim($("#inputToSend").val()) == "") {
//do not send anything
} else {
$(".textModal").append(
'<p class="msg">' + $("#inputToSend").val() + "</p>"
);
$("#inputToSend")
.val("")
.focus();
}
});
// when modal button is closed text is erased
$(".modal").on("hidden.bs.modal", function() {
$(".modal-body").html("");
$(".modal-title").html("");
});
});
.modal-title {
background: #66a3ff;
font-size: 18px;
display: inline-block;
height: 100%;
}
.modal-body {
padding: 30px 20px;
font-size: 16px;
text-transform: uppercase;
text-align: center;
}
#messageInput {
padding: 0px 20px;
}
#sendMessage {
margin: 15px 0px;
}
#inputToSend {
margin-top: 25px;
margin-left: 15px;
width: 730px;
}
#messageSaved {
margin: 0px 15px;
font-size: 16px;
padding: 10px;
border: inset;
height: 100px;
overflow: auto;
text-align:justify;
}
.msg {
margin: 0 0 10px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<i class="fa fa-envelope-o"></i>
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title" id="title"></h6>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body"></div>
<div id="messageInput">
<div id="messageSaved" class="textModal"></div>
<input id="inputToSend" type="text" class="text form-control" placeholder="Insert Message...">
<button id="sendMessage" class="btn btn-primary">Enviar</button>
</div>
</div>
</div>
</div>

That happens because you are referring to the .modal-body with $(".modal-body"), and there are probably more modals with the same class name
You should be more specific if you want to refer to a specific modal.
You can replace $(".modal-body") with $("#basicModal .modal-body") to select only the .modal-body that is under the parent #basicModal

Output wrong div width by width() in jQuery

I created a popup with bootstrap to store several Social media share buttons. Then I created two left and right buttons to navigate between them. My logic is, if modal-body width is less than share buttons content div width, then navigation buttons should be appeared and move to the very end in both sides. Here, in my code, I'm getting wrong modal-body width and therefore right-side navigation button is not working as expected which is I can't go to the last share button. It seems perfectly working with the default loading screen size. The Problem can be exactly seen by reducing the screen size and trying to navigate to the last share button. What I missed here?
$('.modal').on('show.bs.modal', function () {
var currentPos = 0;
var shareBtns = $(".a2a_kit a").length;
var sampleDivWidth = $(".a2a_button_facebook span").width();
var actualButtonWidth = sampleDivWidth + 26
var shareDivWidth = (actualButtonWidth * shareBtns) / 3;
var mainDivWidth = $(".modal-body").width();
//var mainDivWidth = 445;
var x = shareDivWidth / actualButtonWidth;
var y = mainDivWidth / actualButtonWidth;
var z = (x - y);
var stopPos = z * (-actualButtonWidth);
//alert(mainDivWidth);
if( (mainDivWidth - 30) < shareDivWidth ) {
$(".move-btn").css("display", "block");
}
else {
$(".move-btn").css("display", "none");
}
if ( currentPos === 0 ) {
$(".move-btn-l").css("display", "none");
}
$(".move-btn-r").on("click", function() {
$(".a2a_kit").animate({
left : ""+ (currentPos -= 66) +"px"
}, 200);
$(".move-btn-l").css("display", "block");
if (currentPos <= stopPos) {
$(".move-btn-r").css("display", "none");
}
})
$(".move-btn-l").on("click", function() {
$(".a2a_kit").animate({
left : ""+ (currentPos += 66) +"px"
}, 200);
$(".move-btn-r").css("display", "block");
if (currentPos == 0) {
$(".move-btn-l").css("display", "none");
}
})
})
.share-link-div{
overflow: hidden;
width: 75%;
margin: auto;
}
.a2a_kit {
display: inline-flex;
position: relative;
width: max-content;
}
.a2a_kit a .a2a_svg {
border-radius: 50% !important;
padding: 5px;
width: 50px;
height: 50px;
float: none !important;
}
.a2a_kit a:hover {
text-decoration: none !important;
}
.move-btn{
background-color: #fff;
border: 1px solid #ccc;
border-radius: 50%;
width: 35px;
height: 35px;
position: absolute;
top: 20px;
cursor: pointer;
box-shadow: 0 3px 3px #7d7d7d;
}
.move-btn-r {
right: 15px;
}
.move-btn-l {
left: 15px;
}
.move-btn span{
margin-left: 12px;
margin-top: 6px;
position: absolute;
}
.embed-btn .a2a_svg {
float: left;
background-color: #dedede;
color: #000;
font-size: 12px;
height: 32px;
font-weight: 600;
}
.embed-btn .a2a_svg:hover {
opacity: 0.7;
}
.embed-btn .a2a_svg p {
margin: 0px;
top: 5px;
position: relative;
text-align: center;
}
.embed-src{
padding: 10px;
border: 1px solid #ececec;
background-color: #fafafa;
font-size: 14px;
font-weight: 400;
}
.embed-button{
overflow: hidden;
display: flex;
margin-top: 20px;
}
.embed-button .embed-src {
float: left;
width: 100%;
}
.copy-iframe {
border-radius : 0 4px 4px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script async src="https://static.addtoany.com/menu/page.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="share-link-div">
<div class="a2a_kit a2a_kit_size_32 a2a_default_style">
<a class="a2a_button_facebook"></a>
<a class="a2a_button_twitter"></a>
<a class="a2a_button_google_plus"></a>
<a class="a2a_button_pinterest"></a>
<a class="a2a_button_facebook"></a>
<a class="a2a_button_twitter"></a>
<a class="a2a_button_google_plus"></a>
<a class="a2a_button_pinterest"></a>
<a class="a2a_button_facebook"></a>
<a class="a2a_button_twitter"></a>
<a class="a2a_button_google_plus"></a>
<a class="a2a_button_pinterest"></a>
</div>
<div class="move-btn move-btn-l">
<span><</span>
<!-- <i class="fas fa-chevron-left"></i> -->
</div>
<div class="move-btn move-btn-r">
<span>></span>
<!-- <i class="fas fa-chevron-right"></i> -->
</div>
</div>
<div class="embed-button">
<div class="embed-src">
<span>URL and Code</span>
</div>
<button type="button" class="btn btn-primary copy-iframe">Copy</button>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Here is the editable code :
http://jsfiddle.net/rgL2ak0z/3/

I think you cant get width of dynamicaly created div without prior width initialization. Maybe you could get width of document and calculate it? Like:
var mainDivWidth=document.documentElement.clientWidth;

How do I keep users input after closing modal in the same page without reload?

I want to be able to keep the data that the user decided in the checkbox of the modal and send it with the checkbox decision outisde of the modal without leaving the page or reloading.
If the user decides to check the checkbox within the modal how do I keep that data when I press continue to then wait for the submit button to send tha values of all the checkboxes.
var btn = document.getElementById("myBtn");
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
#-webkit-keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
#keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
.modal-body {
padding: 2px 16px;
}
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
<input type="checkbox" name="option" />
<input type="submit" value="continue" />
</div>
</div>
</div>
<div>
<input type="checkbox" name="value" />
<input type="submit" value="Send" />
</div>

Do not think of a modal as an entity separate from your page. A modal is just a normal div on your page, but it is positioned centered and overtop of other things. But it's just a regular div and you can read the values of elements in the modal at any time, even when it's invisible.
The values in the modal's checkbox are still available, just as they would be if they were in a different div. If your form is in the modal, then they are still part of the form. If the form is outside the modal, then you want to use javascript/jQuery at any time to read that checkbox and influence your form.
Here is an example where the form is outside the modal, and javascript updates the value of a form field when the modal is closed.
$('#myModal').modal('hide');
$('button').click(function(){
$('#myModal').modal('show');
});
$('#myCB').change(function(){
$('form input[name=inFormCB]').val( $(this).prop('checked') );
});
form{width:100%;padding:30px;background:wheat;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<p>INSTRUCTIONS: Open modal. Check/Uncheck the checkbox. Close modal. Observe result.</p>
<button>Open Modal</button>
<form>
Value of checkbox myCB:<br>
<input type="text" name="inFormCB" />
</form>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
<input id="myCB" type="checkbox" /> Got It
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

you must make a css of that text Option : to Focus