Develop Reference

How to align Modal form in center using css?

This is my modal form and I want to show this modal in center , I was trying with some css but it didnt helped , any sort of help is appreciated . This is my code
<div class="modal fade" id="success" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" style="background: #1ab394;
border-top-left-radius: 5px;
border-top-right-radius: 5px;">
<button type="button" class="close" data-dismiss="modal"
style="opacity:1;color:#fff;">×</button>
<h4 class="modal-title text-center"><img
src="https://lh3.googleusercontent.com/-Zxh4srAEtU0/Wp0cZV-PJuI/AAAAAAAAD4E/En5x5c53s44jzvG8M0sSyFZXoRhGXfBzwCL0BGAYYCw/h100/2018-03-05.png"
alt=""></h4>
</div>
<div class="modal-body">
<p style="text-align:center;color:#1ab394;font-size:24px;font-weight:500;">Cheers! Payment
Successful!</p>
<p style="color:#555555;">Transaction ID: <strong
style="font-weight:500;font-size:16px;color: #222222;">152458258752515</strong><br>Payment
amount: <strong
style="font-weight:500;font-size:16px;color: #222222;">Rs.35000</strong><br>The above rent shall
credited to your landlord's bank account in<strong
style="font-weight:500;font-size:15px;color: #222222;"> 3 working days</strong></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<
/div>
css what I was trying was something like this :-
.modal {
text-align: center;
padding: 0!important;
}
.modal:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -4px; /* Adjusts for spacing */
}
.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}

If you want to center it vertically, then you can make it simply by flexbox. So add additional styles in your document:
html, body {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
}

issue creating a popup and do not ask again check box in js

I was an issue with creating cookies to do not ask checkboxI want to create this type popup also cookies in website here is my html and js code please reviews my code and please help me sort this problem.
enter image description here
enter image description here

$("div[id^='myModal']").each(function(){
var currentModal = $(this);
//click next
currentModal.find('.btn-next').click(function(){
currentModal.modal('hide');
currentModal.closest("div[id^='myModal']").nextAll("div[id^='myModal']").first().modal('show');
});
//click prev
currentModal.find('.btn-prev').click(function(){
currentModal.modal('hide');
currentModal.closest("div[id^='myModal']").prevAll("div[id^='myModal']").first().modal('show');
});
});
//do not show function
jQuery(document).ready(function($) {
/*if ($.cookie("cacher-modal")) {
$("#popupMaintenanceModal").remove();
} else {
$("#popupMaintenanceModal").modal("show");
}*/
$("#popupMaintenanceCheckbox").click(function() {
if ($(this).is(":checked")) {
$("#myModal1").hide();
$(".modal-backdrop").hide();
console.log("here");
$.cookie("cacher-modal", true);
} else {
$.cookie("cacher-modal", false);
}
});
//checkbox for popup-cookies
$('#showNextpop').click(function(){
if ($.cookie("cacher-modal")) {
//$("#popupMaintenanceModal").remove();
} else {
$("#myModal1").modal("show");
}
});
});
$('#showNextpop1').click(function(){
if ($.cookie("cacher-modal")) {
//$("#popupMaintenanceModal").remove();
} else {
$("#myModal1").modal("show");
}
});
$('#showNextpop2').click(function(){
if ($.cookie("cacher-modal")) {
//$("#popupMaintenanceModal").remove();
} else {
$("#myModal1").modal("show");
}
});
$('#showNextpop3').click(function(){
if ($.cookie("cacher-modal")) {
//$("#popupMaintenanceModal").remove();
} else {
$("#myModal1").modal("show");
}
});
jQuery(document).ready(function($) {
if ($.cookie("cacher-modal")) {
$("#popupMaintenanceModal1").remove();
} else {
$("#popupMaintenanceModal1").modal("show");
}
$("#popupMaintenanceCheckbox1").click(function() {
if ($(this).is(":checked")) {
$("#myModal2").hide();
$(".modal-backdrop").hide();
console.log("here");
$.cookie("cacher-modal", true);
} else {
$.cookie("cacher-modal", false);
}
})
});
jQuery(document).ready(function($) {
if ($.cookie("cacher-modal")) {
$("#popupMaintenanceModal2").remove();
} else {
$("#popupMaintenanceModal2").modal("show");
}
$("#popupMaintenanceCheckbox2").click(function() {
if ($(this).is(":checked")) {
$("#myModal3").hide();
$(".modal-backdrop").hide();
console.log("here");
$.cookie("cacher-modal", true);
} else {
$.cookie("cacher-modal", false);
}
})
});
jQuery(document).ready(function($) {
if ($.cookie("cacher-modal")) {
$("#popupMaintenanceModal3").remove();
} else {
$("#popupMaintenanceModal3").modal("show");
}
$("#popupMaintenanceCheckbox3").click(function() {
if ($(this).is(":checked")) {
$("#myModal4").hide();
$(".modal-backdrop").hide();
console.log("here");
$.cookie("cacher-modal", true);
} else {
$.cookie("cacher-modal", false);
}
})
});
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true" style="top:120px;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Modal title 1</h4>
<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">
<div class="d-flex justify-content-start custom-control custom-checkbox1">
<input id="popupMaintenanceCheckbox" for="popupMaintenanceCheckbox" type="checkbox" name="coupon_question" />
<span class="item-text">Don't show me again</span>
</div>
<button type="button" class="btn btn-default btn-next">Next</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Button trigger modal -->
<!-- Modal -->
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true" style="top:120px;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Modal title 2</h4>
<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">
<div class="d-flex justify-content-start custom-control custom-checkbox2">
<input id="popupMaintenanceCheckbox1" for="popupMaintenanceCheckbox1" type="checkbox" name="coupon_question" />
<span class="item-text">Don't show me again</span>
</div>
<button type="button" class="btn btn-default btn-prev">Prev</button>
<button type="button" class="btn btn-default btn-next">Next</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Button trigger modal -->
<!-- Modal -->
<div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true" style="top:120px;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Modal title 3</h4>
<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">
<div class="d-flex justify-content-start custom-control custom-checkbox2">
<input id="popupMaintenanceCheckbox2" for="popupMaintenanceCheckbox2" type="checkbox" name="coupon_question" />
<span class="item-text">Don't show me again</span>
</div>
<button type="button" class="btn btn-default btn-prev">Prev</button>
<button type="button" class="btn btn-default btn-next">Next</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Button trigger modal -->
<!-- Modal -->
<div class="modal fade" id="myModal4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true" style="top:120px;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Modal title 4</h4>
<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">
<div class="d-flex justify-content-start custom-control custom-checkbox1">
<input id="popupMaintenanceCheckbox3" for="popupMaintenanceCheckbox3" type="checkbox" name="coupon_question" />
<span class="item-text">Don't show me again</span>
</div>
<button type="button" class="btn btn-default btn-prev">Prev</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

So we are going to create a popup with a message and buttons, and a checkbox which saves a setting in a cookie to prevent the popup in the future. Here it is. You won't be able to test it here because the cookies are blocked.
**** UPDATE
Open in external sandbox to see how the cookie works
// You need to save the message data somewhere so you can change it without touching the code. We are going to save it in an object but ideally should be in a database or external JSON file.
const popup_msg_data = {
headline: "How to play",
message: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce turpis est, eleifend non felis id, blandit sodales quam. Nam tortor lorem, porta at enim id, aliquam eleifend lorem.",
checkbox_text: "Don't show this again."
}
// Create variable with our cookie name
const cname = "message_popup_suppress_option_enabled";
// Handler for the checkbox
$("body").on("change", "#popup_suppress", function() {
console.log("input changed");
// Check if checkbox is checked.
const checked = $(this).is(":checked");
if (checked && !cookie_exists()) {
// Set the cookie if not already there
set_suppress_cookie();
} else if (!checked) {
// Delete the cookie if already exists
document.cookie = cname + "; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
}
});
// Check for the cookie
function cookie_exists() {
// Get cookies into an array
const dcookie = decodeURIComponent(document.cookie).split(';');
// Check for our cookie
return dcookie.includes(cname);
}
// Function to set cookie
function set_suppress_cookie() {
// Create a date object one day into the future to expire our cookie
const expires = new Date();
const exp_days = 1;
expires.setTime(expires.getTime() + (exp_days * 24 * 60 * 60 * 1000));
// Create the cookie
document.cookie = cname + ";expires=" + expires + ";path=/";
}
// This function toggles the popup
$("body").on("click", ".toggle-popup", function() {
// Check for the template
const template = $(".popup-template");
// initialize a variable for the popup
let popup = $(".popup-container");
// Function to handle closing the popup
function close_popup() {
// Fade out the popup
popup.fadeOut("fast", function() {
// When done fading put the template back and remove the popup
template.appendTo("body");
$(this).remove();
})
}
// If we have a template continue
if (template.length) {
// If popup is visible
if (popup.is(":visible")) {
close_popup();
} else {
// If our cookie is not present continue with the popup
if (!cookie_exists()) {
// If not visible create the basic HTML structure of the popup and insert the template
popup = $("<div />", {
class: "popup-container"
}).append(
$("<div />", {
class: "popup-scroll"
}).append(
$("<div />", {
class: "popup-overlay toggle-popup"
}),
$("<div />", {
class: "popup-content"
}).append(template)
)
);
// Find all elements in template with data-id attribute and loop over them
popup.find("[data-id]").each(function() {
// Get the id
const id = $(this).data("id");
// Match the id from the element with the right key from our data object and insert text.
$(this).text(popup_msg_data[id] || null);
})
// Append the popup to the dom and add active class
popup.appendTo("body").hide(1, function() {
$(this).fadeIn("fast", function() {
$(this).removeClass("active").addClass("active");
})
});
} else {
console.log("Cookie detected");
}
} // End if visible
} // End if template
})
* {
box-sizing: border-box;
}
body,
html {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
background: slategray;
font-size: 16px;
line-height: 1.4em;
font-family: sans-serif;
}
button.test-btn {
appearance: none;
-webkit-appearance: none;
border: none;
outline: none;
background: cyan;
padding: 12px;
color: black;
}
.popup-template {
display: none;
}
.popup-container {
display: flex;
position: fixed;
z-index: 95000;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.popup-scroll {
display: flex;
position: absolute;
top: 0;
left: 0;
padding: 30px 15px;
width: 100%;
height: 100%;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
z-index: 1;
}
.popup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: .8;
cursor: pointer;
z-index: 1;
}
.popup-content {
position: relative;
z-index: 10;
margin: auto;
opacity: 0;
transform: translate(0, 100px);
transition: opacity .4s, transform .4s ease-out;
}
.popup-container.active .popup-content {
opacity: 1;
transform: none;
}
.popup-content .popup-template {
display: grid;
grid-gap: 20px;
background: black;
color: GhostWhite;
padding: 30px;
position: relative;
max-width: 800px;
}
.popup-hdr {
display: grid;
grid-template-columns: 1fr max-content;
grid-gap: 20px;
align-items: center;
width: 100%;
}
.popup-hdr h2 {
font-size: 1.4em;
line-height: 1.3em;
margin: 0;
color: white;
}
.popup-info {
font-size: .8em;
line-height: 1em;
text-align: right;
}
.popup-ftr {
display: grid;
grid-gap: 20px;
grid-template-columns: 1fr max-content;
}
.popup-check {
display: flex;
align-items: center;
position: relative;
}
.popup-check input {
display: none;
}
.popup-check label {
cursor: pointer;
display: grid;
grid-auto-flow: column;
justify-content: flex-start;
grid-gap: 10px;
align-items: center;
}
.popup-check label:before {
content: "";
display: flex;
justify-content: center;
align-items: center;
text-align: center;
width: 22px;
height: 22px;
background: transparent;
border: 2px solid white;
overflow: hidden;
font-family: "Font Awesome 5 Free", sans-serif;
font-weight: 600;
color: SpringGreen;
font-size: 14px;
line-height: 1;
}
.popup-check input:checked+label:before {
content: "\f00c";
}
.popup-btns {
display: grid;
grid-auto-flow: column;
grid-gap: 10px;
}
.popup-btn {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 12px;
min-width: 90px;
min-height: 48px;
border: 1px solid white;
cursor: pointer;
}
.popup-btn:hover {
background: white;
color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" crossorigin="anonymous" />
<!-- This is the button that will trigger the popup. You may need to change this for your use case -->
<button class="test-btn toggle-popup">Click Here</button>
<!-- This is the template for the popup. Ideally this should be in an external file -->
<div class="popup popup-template">
<div class="popup-hdr">
<h2 data-id="headline"></h2>
<div class="popup-info">5 of 6</div>
</div>
<div data-id="message" class="popup-text"></div>
<div class="popup-ftr">
<div class="popup-check">
<input type="checkbox" id="popup_suppress" />
<label for="popup_suppress" data-id="checkbox_text">
Do not show again
</label>
</div>
<div class="popup-btns">
<div class="popup-btn toggle-popup">Close</div>
<div class="popup-btn" data-action="back">Back</div>
<div class="popup-btn" data-action="next">Next</div>
</div>
</div>
</div>

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>

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