I've modal and copy it from another modal which has been removed because of no need. The problem is that Modal popup not showing after copy / paste from the parent Modal.
<div class="modal fade" id="modalRegistrationForm" tabindex="-1" role="dialog"aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h1 class="modal-title fs-5" id="staticBackdropLabel">
<label style="color:black"> <i class="bi bi-book"> </i>Nadeem Learning Center - Online
</label>
</h1>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close" onclick="hideRegModal()"><span aria-hidden="true">×</span>
</button>
</div>
<div style="font-size:10px; color:black">
<center><br>
<h4><i class="fa fa-user-o" aria-hidden="true" style="color:green"></i> Sign Up </h4>
<i class="fa fa-school"></i>
<i class="fa-solid fa-person-chalkboard"></i>
</center>
</div>
<div class="man">
<div class="form-group">
<span class="fa fa-user form-control-icon"></span>
<input type="name" class="form-control validate" placeholder="Name" id="reg_name">
<span style="color:red" id="name-error" class="error-message"></span>
</div>
<div class="form-group">
<span class="fa fa-envelope form-control-icon"></span>
<input type="email" class="form-control validate" placeholder="Email" id="reg_email">
<span style="color:red" id="email-error" class="error-message"></span>
</div>
<div class="form-group">
<span class="fa fa-lock form-control-icon"></span>
<input type="password" class="form-control validate" placeholder="password" id="reg_pass">
<span style="color:red" id="password-error" class="error-message"></span>
</div>
<div class="form-group">
<span class="fa fa-phone form-control-icon"></span>
<input type="phone" class="form-control validate" placeholder="phone" id="reg_phone" onkeypress='validate(event)'>
<span style="color:red" id="phone-error" class="error-message"></span>
</div>
<div class="form-group">
<span class="fa fa-check form-control-icon"></span>
<button type="button" class="btn btn-success form-control" onclick="validateRegForm();">SignUp</button>
</div>
<div style="font-size:12px; color:black">
<center><label> By clicking Sign Up, you agree to our
<a data-target="#termscondition" data-toggle="modal" href="javascript:justLoadMe2()">Terms and Condition </a>
and <a data-target="#staticBackdrop2" data-toggle="modal" href="javascript:justLoadMe3()"> Privacy Policy.</a>
</label>
</center>
</div>
<div class="form-group">
<span style="color:red" id="save_status" class="error-message"></span>
</div>
</div>
<div>
</div>
</div>
I am using like this to show up the modal.
function RegistrationForm(){
alert("is showing up");
modal_var = document.getElementsByClassName('modal')[3];
modal_var.removeAttribute('style');
modal_var.removeAttribute('aria-hidden');
modal_var.classList.add('show');
modal_var.setAttribute('style', 'display: block');
modal_var.setAttribute('aria-modal', 'true');
modal_var.setAttribute('role', 'dialog');
}
alert is showing up but no modal. How to find the exact number of modal by ClassName?
Code Updated
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Nadeem Learning Center - Online</title>
<meta content="" name="description">
<meta content="" name="keywords">
<!-- Favicons -->
<link href="favicon.png" rel="icon">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,600;1,700&family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Cardo:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
<link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
<link href="assets/vendor/aos/aos.css" rel="stylesheet">
<!-- Template Main CSS File -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link id="bootstrap-css" href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<link rel="stylesheet" href="font/css/font-awesome.min.css">
<link href="assets/css/main.css" rel="stylesheet">
<style>
div.modal-content {
top: 10px;
background: #9fafff;
}
div.modal-dialog{
overflow-y: initial !important
}
div.modal-content_1 {
top: 100px;
background-image: url("Modal_BG.jpg");
}
.man {
width: 80%;
margin: 50px auto;
}
.form-group .form-control {
padding-left: 2.375rem;
}
.form-group .form-control-icon {
position: absolute;
z-index: 2;
display: block;
width: 2.375rem;
height: 2.375rem;
line-height: 2.375rem;
text-align: center;
pointer-events: none;
color: #aaa;
}
</style>
</head>
<body onload="myfunction();">
<!-- ======= Header ======= -->
<header id="header" class="header d-flex align-items-center fixed-top">
<div class="container-fluid d-flex align-items-center justify-content-between">
<a href="index.php" class="logo d-flex align-items-center me-auto me-lg-0">
<i class="bi bi-book"></i>
<img src="images/logo.jpg">
</a>
<nav id="navbar" class="navbar">
<ul>
<li> <a href="javascript:RegistrationForm();"> <i class="bi bi-patch-check" style="font-size:26px; color:orange"></i> Learning</a></li>
<li> <a href="javascript:RegistrationForm();"><i class="bi bi-pencil-square" style="font-size:26px; color:orange"></i> Teaching</a></li>
</ul>
</nav>
<!-- ################ navbar ################# -->
<div class="header-social-links ">
<!--<button type="button" class="btn btn-dark btn-sm"><i class="bi bi-door-open"></i> LogIn</button>-->
<!-- <button type="button" name="login" class="btn btn-dark btn-sm" onclick="logmein()"> <i class="bi bi-door-open"></i> Sign In </button> -->
</div>
<i class="mobile-nav-toggle mobile-nav-show bi bi-list"></i>
<i class="mobile-nav-toggle mobile-nav-hide d-none bi bi-x"></i>
</div>
</header> <!-- End Header -->
<!--#################### Set Cookie Model for new User [0] -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" style="border-bottom-color: #1c0f21;">
<h1 class="modal-title fs-5" id="staticBackdropLabel">
<label><i class="bi bi-book"> </i> Nadeem Learning Center - Online </label>
</h1>
</div>
<div class="modal-body">
<p style="text-align:center"> <label style="color:black; font-size:24px"><i class="bi bi-cookie"></i> Respect Your Privacy </label></p>
<p style="text-align:center"> <label style="color:black">This website uses cookies for improving the user experience.</label></p>
<!-- Modal Form-->
<form action="javascript:void(0);" method="post">
<div class="mb-3">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="agree_Check" disabled="disabled" checked="checked" style="display:none">
<label class="form-check-label" for="exampleCheck1" style="display:none">I agreed <b>"to the terms and conditions"</b></label>
</div>
<div class="modal-footer" style="border-bottom-color: #1c0f21;">
<p style="text-align:center">
<button type="button" class="btn btn_custom" onclick="hideModal()" onmousedown="clr_chng()">
<i class="bi bi-check"></i>Accept
</button>
<a data-target="#staticBackdrop2" data-toggle="modal" href="javascript:readMore()">
<p style="text-align:center"><i class="fa fa-book" style="color:blue"></i> Read More</p>
</a>
<button type="button" class="btn btn_custom" onclick="hideModal()"><i class="bi bi-cross"></i>Cancel</button>
</p>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- #################### Privacy Policy [1] -->
<div class="modal fade" id="staticBackdrop2" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header text-center">
<h1 class="modal-title fs-5" id="staticBackdropLabel">
<label style="color:black"> <i class="bi bi-book"> </i>Nadeem Learning Center - Online </label>
</h1>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close" onclick="Thanks()"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<p style="text-align:center">
<label style="color:black; font-size:24px"><i class="bi bi-clipboard-check"></i> Privacy Policy </label></p>
<form action="javascript:void(0);" method="post">
<div class="mb-3">
</div>
<div class="modal-footer" style="border-bottom-color: #1c0f21;">
<button type="button" class="btn btn_custom" onclick="Thanks()"><i class="bi bi-arrow-left-circle"></i> Go Back</button>
<a data-target="#termscondition" data-toggle="modal" href="javascript:termsCondition()">
<p><i class="bi bi-clipboard-data"> </i>Terms and Condition. </p>
</a>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- #################### Terms & Conditions [2] -->
<div class="modal fade" id="termscondition" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" style="border-bottom-color: #1c0f21;">
<h1 class="modal-title fs-5" id="staticBackdropLabel"> <label><i class="bi bi-book"> </i> Nadeem Learning Center - Online </label>
</h1>
</div>
<div class="modal-body">
<p style="text-align:center"> <label style="color:black; font-size:24px"><i class="bi bi-clipboard-check"></i> Terms & Conditions </label></p>
<!-- Modal Form style="color:blue;text-align:center;" -->
<form action="javascript:void(0);" method="post">
<div class="mb-3">
</div>
<div class="modal-footer" style="border-bottom-color: #1c0f21;">
<button type="button" class="btn btn_custom" onclick="chupaChoro()"><i class="bi bi-cross"></i> Close</button>
</div>
</form>
</div>
</div>
</div>
<!-- #################### Registration ############### [3] -->
<div class="modal fade" id="modalRegistrationForm" tabindex="-1" role="dialog"aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h1 class="modal-title fs-5" id="staticBackdropLabel">
<label style="color:black"> <i class="bi bi-book"> </i>Nadeem Learning Center - Online
</label>
</h1>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close" onclick="hideRegModal()"><span aria-hidden="true">×</span>
</button>
</div>
<div style="font-size:10px; color:black">
<center><br>
<h4><i class="fa fa-user-o" aria-hidden="true" style="color:green"></i> Sign Up </h4>
<i class="fa fa-school"></i>
<i class="fa-solid fa-person-chalkboard"></i>
</center>
</div>
<div class="man">
<div class="form-group">
<span class="fa fa-user form-control-icon"></span>
<input type="name" class="form-control validate" placeholder="Name" id="reg_name">
<span style="color:red" id="name-error" class="error-message"></span>
</div>
<div class="form-group">
<span class="fa fa-envelope form-control-icon"></span>
<input type="email" class="form-control validate" placeholder="Email" id="reg_email">
<span style="color:red" id="email-error" class="error-message"></span>
</div>
<div class="form-group">
<span class="fa fa-lock form-control-icon"></span>
<input type="password" class="form-control validate" placeholder="password" id="reg_pass">
<span style="color:red" id="password-error" class="error-message"></span>
</div>
<div class="form-group">
<span class="fa fa-phone form-control-icon"></span>
<input type="phone" class="form-control validate" placeholder="phone" id="reg_phone" onkeypress='validate(event)'>
<span style="color:red" id="phone-error" class="error-message"></span>
</div>
<div class="form-group">
<span class="fa fa-check form-control-icon"></span>
<button type="button" class="btn btn-success form-control" onclick="validateRegForm();">SignUp</button>
</div>
<div style="font-size:12px; color:black">
<center><label> By clicking Sign Up, you agree to our
<a data-target="#termscondition" data-toggle="modal" href="javascript:justLoadMe2()">Terms and Condition </a>
and <a data-target="#staticBackdrop2" data-toggle="modal" href="javascript:justLoadMe3()"> Privacy Policy.</a>
</label>
</center>
</div>
<div class="form-group">
<span style="color:red" id="save_status" class="error-message"></span>
</div>
</div>
<div>
</div>
</div>
<!-- THis one is extra. After removing the whole design not work -->
</div></div></div>
<!--################# -->
<section id="hero" class="hero" data-aos="fade" data-aos-delay="1500">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-6 text-center">
<h2 style="font-size:36px; color:red"><br><br>Resource <span>for Learners</span> </h2>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="wrap">
<div class="search">
<input type="text" class="searchTerm glowing-border" placeholder="What are you looking for?">
<button type="submit" class="searchButton glowing-border">
<i class="bi bi-search"></i>
</button>
</div>
</div>
</div>
<br>
</div>
</section>
<main id="main" data-aos="fade" data-aos-delay="1500">
<section id="gallery" class="gallery">
<div class="container-fluid">
<div class="row gy-4 justify-content-center">
<?php
while ($row = $result->fetch_assoc())
{
echo '<div class="col-xl-3 col-lg-4 col-md-6">';
echo '<div class="gallery-item h-100">';
echo '<img src="' . $row['url_src'] . '" class="img-fluid" alt="404 Not Found">';
echo '<div class="gallery-links d-flex align-items-center justify-content-center">';
// #OLD CODE 29-May-2025# echo '<a href="'. $row['url_video'] . '" title="Education" class="glightbox preview-link" data-glightbox="title: <h5>'.$row['Description'].'</h5>; description: <p>'.$row['descriptionLong'].' <br><br> <a href='.$row['url_tar'].'>Read more...</p></a><br><br> '.$row['Para1'].' <br><br> '.$row['Para2'].'</p>; descPosition: right;"> <i class="bi bi-arrows-angle-expand"> </i></a>';
echo '<a href="'. $row['url_video'] . '" title="Education" class="glightbox preview-link" data-glightbox="title: <h5>'.$row['Description'].'</h5>; description: <p>'.$row['descriptionLong'].' <br><br> <a target='."_blank".' href='."mailto:contact@nadeemlearningcenter.com".'>contact@nadeemlearningcenter.org...</p></a><br><br> '.$row['Para1'].' <br><br> '.$row['Para2'].'</p>; descPosition: right;"> <i class="bi bi-arrows-angle-expand"> </i></a>';
echo '<a href=# onclick="javascript:loadpage(id)" id="'. $row['Name'] . '" class="details-link" ><i class="bi bi-link-45deg"></i></a>';
echo '</div>';
echo '</div>';
echo '</div>';
}
?>
</main>
<footer id="footer" class="footer">
<div class="container">
<div class="copyright">
<br>
<span style="color:white;">The Nadeem Learning Center - ONLINE is not responsible for the content of external sites.
Read about our approach to <a>external linking.</a></span>
<div class="header-social-links ">
<a href="#" class="twitter"><i class="bi bi-twitter-x"></i></a>
<a href="#" class="facebook"><i class="bi bi-facebook"></i></a>
<a href="#" class="instagram"><i class="bi bi-instagram"></i></a>
<a href="#" class="linkedin"><i class="bi bi-linkedin"></i></i></a>
<a href="#" class="youtube"><i class="bi bi-youtube"></i></i></a>
</div>
</div>
<div class="credits">
A Project of <a href="#" onMouseOver="this.style.color='white'" onMouseOut="this.style.color='green'">Learning & Teaching.</a>
<br>
<a href="mailto: contact@nadeemlearningcenter.org" onMouseOver="this.style.color='white'" onMouseOut="this.style.color='green'">contact@nadeemlearningcenter.org</a>
</div>
</div>
</footer>
<!-- End Footer -->
<a href="#" class="scroll-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
<div id="preloader">
<div class="line"></div>
</div>
<!-- Vendor JS Files -->
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>
<!-- Template Main JS File -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!--<script src="assets/js/program.js"></script>
<script type="text/javascript" src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/docs-app/js/bundles/4.20.0/compiled.min.js"></script>-->
<script type="text/javascript" src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/docs-app/js/dist/search-v4/search.min.js"></script>
<!--<script src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/docs-app/js/dist/main.min.js"></script>-->
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event){
});
</script>
<script type="text/javascript">
function loadpage(a){
document.location.href = '/I_detail.php?p_id=' + encodeURIComponent(a);
}
function myfunction(){
//################------------Set or Retrieve Cookie Message------################----document load function------######
}
function hideModal(){
//###############-----------Used to hide the Cookie Modal---------
modal_var = document.getElementsByClassName('modal')[0];
modal_var.removeAttribute("style");
modal_var.removeAttribute("aria-modal");
modal_var.removeAttribute("role");
modal_var.classList.remove("show");
modal_var.setAttribute("style", "display: none");
modal_var.setAttribute("aria-hidden", "true");
}
console.log('hide MOdel Message');
}
function RegistrationForm(){
alert("is showing up");
modal_var = document.getElementById("modalRegistrationForm");
modal_var.removeAttribute('style');
modal_var.removeAttribute('aria-hidden');
modal_var.classList.add('show');
modal_var.setAttribute('style', 'display: block');
modal_var.setAttribute('aria-modal', 'true');
modal_var.setAttribute('role', 'dialog');
}
function readMore(){
//#############-----1. Close the Modal[0] , ######--2. Open the modal Privacy Policy [1]
hideModal();
modal_var = document.getElementsByClassName('modal')[1];
modal_var.removeAttribute('style');
modal_var.removeAttribute('aria-hidden');
modal_var.classList.add('show');
modal_var.setAttribute('style', 'display: block');
modal_var.setAttribute('aria-modal', 'true');
modal_var.setAttribute('role', 'dialog');
}
function Thanks() {
// #############----- close the modal[1] privacy modal
modal_var = document.getElementsByClassName('modal')[1];
modal_var.removeAttribute("style");
modal_var.removeAttribute("aria-modal");
modal_var.removeAttribute("role");
modal_var.classList.remove("show");
modal_var.setAttribute("style", "display: none");
modal_var.setAttribute("aria-hidden", "true");
}
function Thanks2() {
// #############----- close the modal[2] Terms and Condition
modal_var = document.getElementsByClassName('modal')[2];
modal_var.removeAttribute("style");
modal_var.removeAttribute("aria-modal");
modal_var.removeAttribute("role");
modal_var.classList.remove("show");
modal_var.setAttribute("style", "display: none");
modal_var.setAttribute("aria-hidden", "true");
hideModal();
}
function chupaChoro(){
// #############----- close the modal[2] Terms and Condition
modal_var = document.getElementById('termscondition');
modal_var.removeAttribute('style');
modal_var.removeAttribute('aria-hidden');
modal_var.classList.add('show');
modal_var.setAttribute('style', 'display: none');
modal_var.setAttribute('aria-modal', 'true');
modal_var.setAttribute('role', 'dialog');
}
function termsCondition(){
Thanks();
modal_var = document.getElementById('termscondition');
modal_var.removeAttribute('style');
modal_var.removeAttribute('aria-hidden');
modal_var.classList.add('show');
modal_var.setAttribute('style', 'display: block');
modal_var.setAttribute('aria-modal', 'true');
modal_var.setAttribute('role', 'dialog');
}
function hideRegModal(){
modal_var = document.getElementsByClassName('modal')[3];
modal_var.removeAttribute("style");
modal_var.removeAttribute("aria-modal");
modal_var.removeAttribute("role");
modal_var.classList.remove("show");
modal_var.setAttribute("style", "display: none");
modal_var.setAttribute("aria-hidden", "true");
}
</script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="assets/js/main.js"></script>
<script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
You have this code at your end:
function RegistrationForm(){
alert("is showing up");
modal_var = document.getElementById("modalRegistrationForm");
modal_var.removeAttribute('style');
modal_var.removeAttribute('aria-hidden');
modal_var.classList.add('show');
modal_var.setAttribute('style', 'display: block');
modal_var.setAttribute('aria-modal', 'true');
modal_var.setAttribute('role', 'dialog');
}
in the updated code. Yet, you can simply show your Bootstrap modal via
$('#modalRegistrationForm').modal('show');
But make sure you fix your other syntax errors too, such as
function hideModal(){
//###############-----------Used to hide the Cookie Modal---------
modal_var = document.getElementsByClassName('modal')[0];
modal_var.removeAttribute("style");
modal_var.removeAttribute("aria-modal");
modal_var.removeAttribute("role");
modal_var.classList.remove("show");
modal_var.setAttribute("style", "display: none");
modal_var.setAttribute("aria-hidden", "true");
}
console.log('hide MOdel Message');
}