The persistent issue of the modal box disappearing persists, despite my efforts to remove additional instances of bootstrap.min

I have been struggling to prevent my modal box from disappearing, despite trying various solutions found online. How can I ensure that it stays visible?

Here is the code in question:

<html>

    <head>

    <title> Test Slides </title>

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">

    <style type="text/css">


   .carousel-control {
    padding-top:10%;
    width:5%;
    }
    /* Video icon overlay on image */
    .videos img {
    width:100%;
    height:auto;
   }
   a.video {
   float: left;
  position: relative;
}
a.video span {
  width: 100%;
  height: 100%;
  position: absolute;
  background: url("images/lightbox-play.png") no-repeat;
  background-position: 50% 50%;
  background-size: 15%;
}
@media screen and (max-width: 480px) {
  a.video span {
    background-size: 400%;
  }
}
/* gutter spaces */
.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
    padding-right:0;
    padding-left:0;
}

.row.no-gutter {
    margin-left: 0;
    margin-right: 0;
}
     /* Style the Image Used to Trigger the Modal */
#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
    display: none; 
    position: fixed; 
    z-index: 1; 
    padding-top: 100px; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.9);
}

/* Modal Content (Image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

/* Modal Video*/
.modal iframe {

   position: absolute;
   left: 20%;
   top: 10%; 

}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)}
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}

    </style>

    </head>

    <body>

    <div class="container-fluid">
    <div class="col-md-12">
         <h1>Nerdic Consult</h1>

            <div id="myCarousel" class="carousel slide">

                <!-- Carousel items -->
                <div class="carousel-inner">
                    <div class="item active">
                        <div class="row no-gutter">
                            <div id="myImg1" class="col-sm-3 videos"><a href="" class="video"><span></span><img src="images/image 1.jpg" alt="Image" class="img-responsive"></a>
                            </div>
                            <div class="col-sm-3 videos"><a href="" class="video"><span></span><img src="images/image 2.jpg" alt="Image" class="img-responsive"></a>
                            </div>
                            <div class="col-sm-3 videos"><a href="" class="video"><span></span><img src="images/image 3.jpg" alt="Image" class="img-responsive"></a>
                            </div>
                            <div class="col-sm-3 videos"><a href="" class="video"><span></span><img src="images/image 4.jpg" alt="Image" class="img-responsive"></a>
                            </div>
                        </div>
                        <!--/row-->
                    </div>
                    <!--/item-->
                    <div class="item">
                        <div class="row no-gutter">
                            <div class="col-sm-3 videos"><a href="" class="video"><span></span><img src="images/image 5.jpg" alt="Image" class="img-responsive"></a>
                            </div>
                            <div class="col-sm-3 videos"><a href="" class="video"><span></span><img src="images/image 6.jpg" alt="Image" class="img-responsive"></a>
                            </div>
                            <div class="col-sm-3 videos"><a href="" class="video"><span></span><img src="images/image 7.jpg" alt="Image" class="img-responsive"></a>
                            </div>
                            <div class="col-sm-3 videos"><a href="" class="video"><span></span><img src="images/image 8.jpg" alt="Image" class="img-responsive"></a>
                            </div>
                        </div>
                        <!--/row-->
                    </div>
                    <!--/item-->
                </div>
                <!--/carousel-inner--> <a class="left carousel-control" href="#myCarousel" data-slide="prev"><img src="images/lightbox-prev.png"/></a>

                <a class="right carousel-control" href="#myCarousel" data-slide="next"><img src="images/lightbox-next.png"/></a>
            </div>
            <!--/myCarousel-->

            <!-- The Modal -->
<div id="myModal1" class="modal">

  <!-- The Close Button -->
  <span class="close" onclick="document.getElementById('myModal1').style.display='none'">&times;</span>

  <!-- Modal Content (The Video) -->
  <iframe width="60%" height="60%" src="https://www.youtube.com/embed/AhTbZTLkIIs" frameborder="0" allowfullscreen=""></iframe>

</div>
    </div>


</div>

<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>

    <script type="text/javascript">

    $(document).ready(function() {
    $('#myCarousel').carousel({
    interval: 10000
    })

    $('#myCarousel').on('slid.bs.carousel', function() {
        //alert("slid");
    });


});

// Get the modal
var modal = document.getElementById('myModal1');

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg1');
img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

    </script>

    </body>
</html>
javascripthtmlcsstwitter-bootstrap

Answer №1

Many thanks, there's no need to worry about it. I found out that the issue was caused by the href in the anchor tag. By removing the href="" from the anchor tag, the modal box remained visible.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Outlook-2010 does not support the current display

Looking for help styling a page that will be opened in ms-outlook 2010. The issue is that it does not support the display attribute. Anyone have a recommendation for an alternative? One suggestion could be to create a class with properties similar to disp ...

htmlcssoutlookoutlook-2010

Is it possible to merge JavaScript files exclusively using encore?

I am working on a Symfony project with a Twitter Bootstrap template where the assets are hardcoded in Twig. I would like to use Encore to manage assets, but I want it to only combine JavaScript files without compiling them further. Is there a way to confi ...

javascriptsymfonynpmwebpack-encore

"Clicking on the hamburger menu causes the webpage to reset its scroll

I recently integrated a mobile hamburger menu into my website, which is primarily built around a single page. However, I noticed that whenever I open the menu, it automatically scrolls to the top of the page regardless of where you were previously scrollin ...

javascriptjqueryhtml

Typescript does not produce unused members

Having an issue with the JS code that TypeScript compiler is generating. Here's an example class: // Class export class UserDTO { Id: number; FirstName: string; LastName: string; DateOfBirth: Date; getFullName(): string { ...

javascripttypescriptknockout-mapping-plugin

Storing a selected database column as a variable from an HTML page in Node.js with Express

My website showcases flight information pulled from a MySQL database. The process begins with a form where users select destinations and dates for their desired flight. Once the form is submitted, users are directed to another page where flights matching t ...

javascripthtmlmysqlnode.jsexpress

Guide to downloading a CSV file directly from a webpage built with vue.js

Delving into the world of vue.js, I find myself pondering over how to incorporate a download link in my webpage for a CSV file stored locally. In my component Template.vue, I have the following structure: <a :href="item.loc" download> {{item.title ...

javascriptcsvvue.jsdownload

Incorporating AngularJS to show sections of a webpage in real-time

, I am working on an angular js application in which I'm using rest services to retrieve http response data. My goal is to display different parts of the webpage conditionally based on the response data. For example, if the data in angular indicates " ...

htmlangularjsrest

Position the vertical bar directly adjacent to the form input field

Looking for assistance with creating a unique webpage layout that includes a form where the employee ID is visually separated from the rest of the content by a vertical bar extending across the entire page. However, my attempts to achieve this using a gr ...

javascriptcssreactjs

Tips for handling notifications that have been read and unread in a React application

In my current project using React JS, I am tasked with creating a notifications component that will display account-related activities. The notifications need to be sorted into read and unread categories. My main question is how should I manage the read a ...

javascriptreactjsnext.js

What could be the reason for the image not displaying properly in a React application?

Why isn't the image appearing as a background in the container with text on top? What am I doing wrong here? <div className="container-fluid"> <div className="col-md-12 col-sm-12 col-xs-12 bgContainer matchingTalent"> ...

htmlcssreactjstwitter-bootstrap

``There seems to be an issue with CSS Transform/Transition not functioning properly

Here is some CSS code that I used to animate a list of items on my website: selector { display: flex; } #primary li a { -webkit-background-clip: text; -webkit-text-fill-color: transparent; ...

csssafaritransformtransitionwebkit-transition

Avoid loading the page when the browser's back button is pressed with vue-router

In my application, I have a "Home" page as well as a "Success" page. On the Success page, there is a button that, when clicked, redirects to a URL like https://google.com, using window.location.href='https://google.com'. Currently, I am able to ...

javascriptvue.jsvue-router

Ensure Owl Carousel 2 is set up to disable drag functionality on desktop devices while enabling click through functionality

I am currently working with Owl Carousel 2 and I want to create a unique interaction for desktop while keeping the default touch swipe interaction for mobile devices. I have managed to disable mouseDrag using the JS code below, but now I am looking to add ...

javascriptjqueryowl-carousel-2

Add data to a nested array with Vuex

Currently, I am facing a challenge with adding an object to a nested array in Vue using store / vuex. While I have successfully updated the main comments array with a mutation, I am struggling to identify the specific main comment to which the new reply ob ...

javascriptvue.jsnuxt.jsvuex

I'm interested in utilizing Angular JS $anchorScroll to quickly navigate to the top of a page by using <a href>

Could you assist me in properly executing $anchorscroll with an href like this? Html: </div> <div> <a class="button" ng-click="scrollTo('section')" ng-href="#{{url}}" title="{{section}}">Next</a> </div> ...

angularjshtml

When trying to retrieve a value from a custom render function in React with TypeScript, an error occurs indicating that the value is not assignable to type 'ReactNode'

Recently, I attempted to develop a versatile swiper component using Next.js 13 (App Router) v13.4.12 along with TypeScript. However, I encountered an issue when trying to access data from the component props, which involves a custom function for rendering ...

javascriptreactjstypescriptswiper.js

Error occurs in Typescript when attempting to store data in a record using a pointer

When working with nodes and organizing them into a tree structure, I encounter an issue: This is the definition of the interface: interface IDataObj { children: IDataObj[], frontmatter : { type: string, title: string, path: string}, name: str ...

javascripttypescript

What is the best way to change the number 123456789 to look like 123***789 using either typescript or

Is there a way to convert this scenario? I am working on a project where the userID needs to be displayed in a specific format. The first 3 characters/numbers and last 3 characters/numbers should be visible, while the middle part should be replaced with ...

javascripttypescript

Utilizing d3.js to implement a scatterplot with zoom functionality that focuses solely on zooming the axis without affecting

Having trouble creating a scatterplot with zoom functionality where only the axis is getting zoomed, not the data itself. Can anyone provide some assistance or insight on what might be wrong? If you're interested in checking out the project, here&apo ...

javascripthtmlcsscsvd3.js

What is the inner workings behind server side rendering in Next.js?

I am seeking clarification on Server Side Rendering, specifically with Next.js. During server side rendering, I want to confirm the 'execution path' as follows: Client makes a request to the server for the webpage, which serves up an HTML only ...

javascriptreactjsnext.jsserver-side-rendering