Bootstrap CSS allows for easy closing of modals

Having trouble with the Twitter Bootstrap CSS causing my animation to open with a fade and immediately close. Not sure why this is happening, can anyone provide assistance?

Update: Turns out, the bootstrap.css file already has Modals implemented. Using both of them together is causing issues. Leaving this note for future reference.

JSFiddle Link: http://jsfiddle.net/GB9ud/

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=iso-8859-9">
    <script src="js/jquery-1.7.1.min.js" lang="text/javascript"></script>
    <script src="js/bootstrap.js" lang="text/javascript"></script>
    <script src="js/bootstrap-tooltip.js" lang="text/javascript"></script>
    <script src="js/main.js" lang="text/javascript"></script>
    <script src="js/bootstrap-modal.js" lang="text/javascript"></script>
    <link rel="stylesheet" href="/css/main.css">
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/bootstrap-responsive.min.css">
    <title>Library Management System</title>
</head>
<body>
    <a data-toggle="modal" data-book-id="1" href="#extendbook" class="btn">Extend</a>
    <div id="extendbook" class="modal hide fade">
        <div class="modal-header">
            <a data-dismiss="modal" class="close">×</a>
            <h3>Modal header</h3>
        </div>
        <div class="modal-body">
            <p>One fine body…</p>
        </div>
        <div class="modal-footer">
            <a href="#" class="btn">Close</a><a href="#" class="btn btn-primary">Save changes</a>
        </div>
    </div>
    </body>
</html>

Answer №1

The modal is being called twice, causing it to load, close, and then load again

Answer №2

After encountering similar issues, I found that upgrading my jQuery version to 1.9 or above was the solution that worked for me.

Answer №3

When I encountered a similar issue while working on a project in asp.NET, I found the solution by switching from Bootstrap 3.0.1 to Bootstrap 2.3.2.

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

Revamping the Jquery Waypoint

Greetings, I am currently delving into the world of Jquery waypoints and facing a bit of challenge getting it to work. My goal is to have an "alert" pop up once an element becomes visible on the screen, but for some reason, the alert doesn't show up w ...

Arranging divs within a wrapper, ensuring that one of them displays a vertical scrollbar when the content exceeds the space available

I'm currently facing a challenge with defining the height of the description box in order to achieve the layout shown. I am trying to find a solution without relying on javascript. https://i.stack.imgur.com/3j278.png At present, the wrapper and titl ...

In IE8, the :last-child pseudo-class appears to be ineffective

Here is the HTML structure I am working with: <div class="footerMenu"> <ul> <li>Home</li> <li>About</li> <li>Feedback</li> <li>Contact us</li> </ul> ...

Increase the selection width automatically

.option100{ width:100px !important; } <select id="fieldOfInterestSelect" name="fieldOfInterest" class="form-control" required=""> <option value="-1">SELECT ONE</option> <option value="4893" class="option100">Actual(R)rrrrr ...

Example of Image Slider using AngularJS

<body ng-app="myApp"> <div ng-controller="slideShowController" class="imageslide" ng-switch='slideshow' ng-animate="'animate'"> <div class="slider-content" ng-switch-when="1"> <img src="../images/ship.png" /> & ...

Using jQuery to append a string to a CSS property

My current task involves modifying a series of divs with background images named Look-1.jpg to Look-6.jpg. I am looking to add "-cut" to all of them simultaneously to transform them into Look-6-cut.jpg. I have two collections of background images and I ai ...

CSS Menu Not Functioning Properly on iPad While Scrolling is Required

My CSS dropdown menu has mouseout and mouseover events but I'm experiencing issues on iPads and iPhones. The menu automatically closes when scrolling, making it difficult to open any links unless the menu is short enough to avoid scrolling. Does anyon ...

Will the rel attribute work in all web browsers and with all HTML tags?

Confirming that it is compatible for use with JQuery scripting. ...

iOS displaying CSS Transform issue exclusively

Creating a website that is fully mobile responsive is my goal. However, after designing the header, I realized that it wasn't displaying correctly on IOS devices like my iPad. The "Transform: translateX(-100%);" statement was functional on Android pho ...

Exploring the differences between Bootstrap rows and allowing columns to wrap

What are the differences between creating new rows and letting the rows wrap? For instance: Allowing columns to wrap. <div class="row"> <div class="col-6">Col-1</div> <div class="col-6">Col-2& ...

Issue with Tooltip Position when Scrolling Sidebar is causing display problems

My goal is to create a Sidebar with Tooltip attached to its <li> elements similar to this example: Screenshot - Good Tooltip However, I am facing an issue where the position of the Tooltip breaks when scrolling to the bottom of the sidebar, causing ...

The second picture in the slider transitions smoothly into view over the visible area of the first image

My image slider is based on jQuery but I'm facing a problem. When the page loads or reloads, the second image of the slider appears in the visible area overlapping the first image like this: https://i.sstatic.net/osbfb.png However, if I click the ar ...

Using JavaScript to store CSS style properties in an array

In the midst of building a React-datagrid project, I am streamlining CSS properties for an array. However, there seems to be redundant CSS properties that I would like to consolidate into an array format. let _columns = []; let commonStyle = {"width":"20 ...

Learning the ins and outs of HTML5 and CSS3

Does anyone have recommendations for high-quality HTML5 and CSS3 tutorials? ...

Why does the diamond symbol appear distorted on my iPhone screen?

My website is similar to SO where moderators have a diamond sign at the end of their name. However, I am facing an issue on my iPhone where the diamond sign looks red and distorted (on Chrome it appears normal). https://i.sstatic.net/RnpyP.jpg As you can ...

How can you line up various form elements, like pickers, in a row using Material UI?

As someone new to material ui, I haven't come across a solution for my specific issue yet. While there are similar questions, none seem to address the problem of aligning different form field types. My observation is that the material ui date picker ...

Equal gutters are present between CSS floats

After conducting various experiments, I have devised a method to incorporate fixed and equal gutters between floats. My approach involves using positive and negative margins as well as multiple wrappers, making the solution somewhat cumbersome. However, I ...

I am looking to insert a link into each column, but unfortunately, the styling is becoming disrupted whenever I attempt to do so due to the constraints

Is there a way to add links to each column without disrupting the current styling? Apologies for the messy code, I am still new to this field. <div class="row justify-content-end"> <a href="#"><div class=&qu ...

Implementing JavaScript validation to alter the background image

I encountered a small issue while working on my project. I was designing a form in HTML using JavaScript, and for the input fields, I decided to use a background image with padding on the left to enhance its appearance. Everything seemed fine until I ran i ...

Looking for an iframe that can adapt to varying content sizes and scale seamlessly with different screen dimensions?

I am new to advanced coding and currently working on my first responsive Wordpress site. I have a "Product Search" database/site that I'm trying to integrate into my website using an iFrame. I want the integration to look seamless without scroll bars ...