bootstrap modal dialog displayed on the edge of the webpage

I am facing an issue with a modal dialog that pops up when clicking on a thumbnail. The JavaScript code I used, which was sourced online, integrates a basic Bootstrap grid layout.

The problem arises when half of the popup extends beyond the edge of the page. This issue seems to improve when I decrease the width of the page.

Here is the code snippet (note: the JavaScript code is not necessary to analyze this):

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge, chrome=1">
        <title>site name</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <link rel="logo" href="img/logo.png">
        <!-- Place favicon.ico in the root directory -->
        <link rel="stylesheet" href="css/bootstrap.css">
        <link rel="stylesheet" href="css/main.css">

        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

        <script src="js/vendor/modernizr-2.8.3.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/main.js"></script>
    </head>
<body>

<div class="container">
    <div class="row">
        <div class="col-lg-4">
             <h1 class="page-header">Thumbnail Gallery</h1>

            <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="This is my title" data-caption="Some lovely red flowers" data-image="http://www.picturesnew.com/media/images/car-image.jpg" data-target="#image-gallery">
                    <img class="img-responsive" src="http://www.picturesnew.com/media/images/car-image.jpg" alt="Short alt text" />
                </a>

            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="image-gallery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>

                </button>
                 <h4 class="modal-title" id="image-gallery-title"></h4>

            </div>
            <div class="modal-body">
                <img id="image-gallery-image" class="img-responsive" src="" />
            </div>
            <div class="modal-footer">
                <div class="col-md-2">
                    <button type="button" class="btn btn-primary" id="show-previous-image">Previous</button>
                </div>
                <div class="col-md-8 text-justify" id="image-gallery-caption">This text will be overwritten by jQuery</div>
                <div class="col-md-2">
                    <button type="button" id="show-next-image" class="btn btn-default">Next</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

javascripthtmlcsstwitter-bootstrapmodal-dialog

Answer №1

Showcasing the functionality of a modal, this fiddle highlights its smooth operation.

Just like the previous response, it's crucial to assess the HTML structure for optimal performance.

Check out the demo here

<div class="container">
    <div class="row">
        <div class="col-lg-4">
             <h1 class="page-header">Thumbnail Gallery</h1>

            <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="This is my title" data-caption="Some lovely red flowers" data-image="http://www.picturesnew.com/media/images/car-image.jpg" data-target="#image-gallery">
                    <img class="img-responsive" src="http://www.picturesnew.com/media/images/car-image.jpg" alt="Short alt text" />
                </a>

            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="image-gallery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>

                </button>
                 <h4 class="modal-title" id="image-gallery-title"></h4>

            </div>
            <div class="modal-body">
                <img id="image-gallery-image" class="img-responsive" src="" />
            </div>
            <div class="modal-footer">
                <div class="col-md-2">
                    <button type="button" class="btn btn-primary" id="show-previous-image">Previous</button>
                </div>
                <div class="col-md-8 text-justify" id="image-gallery-caption">This text will be overwritten by jQuery</div>
                <div class="col-md-2">
                    <button type="button" id="show-next-image" class="btn btn-default">Next</button>
                </div>
            </div>
        </div>
    </div>
</div>

Answer №2

Is the first part of a row? If not, it should be. The issue may be that the modal section is right after the initial section with col-lg-4. This could be causing the modal to be misaligned due to the 4 columns already taken up by the first section. Try enclosing that section in a row and keeping the modal section outside of it.

<body>
    <div class="row">
        <div class="col-lg-4">
            <h1 class="page-header">Thumbnail Gallery</h1>
            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="This is my title" data-caption="Some lovely red flowers" data-image="http://www.picturesnew.com/media/images/car-image.jpg" data-target="#image-gallery">
                    <img class="img-responsive" src="http://www.picturesnew.com/media/images/car-image.jpg" alt="Short alt text">
                </a>
            </div>
        </div>
    </div>


    <div class="modal fade" id="image-gallery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="image-gallery-title"></h4>
                </div>
                <div class="modal-body">
                    <img id="image-gallery-image" class="img-responsive" src="">
                </div>
                <div class="modal-footer">

                    <div class="col-md-2">
                        <button type="button" class="btn btn-primary" id="show-previous-image">Previous</button>
                    </div>

                    <div class="col-md-8 text-justify" id="image-gallery-caption">
                        This text will be replaced by jQuery
                    </div>

                    <div class="col-md-2">
                        <button type="button" id="show-next-image" class="btn btn-default">Next</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

Answer №3

After experiencing the same issue, I discovered that the problem was not related to how my modal html was structured. It turned out that my _Layout.cshtml file was not correctly referencing the stylesheet from my bootswatch theme. By fixing this stylesheet reference, the issue was resolved.

I had to swap out 

<link rel="stylesheet" href="~/Content/bootstrap.css" />

with 

<link rel="stylesheet" href="~/Content/bootstrap-cerulean.css" />

(substitute bootstrap-cerulean with your own custom stylesheet)

Although it may be too late for your situation, hopefully this information can assist someone else.

Answer №4

It was recommended to remove the head ref mentioned below:

Here is a well-structured template for creating a popup gallery with images on the web (currently not functional for local images, that issue is being addressed).

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge, chrome=1">
        <title>site name</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <link rel="logo" href="img/logo.png">
        <!-- Place favicon.ico in the root directory -->
        <link rel="stylesheet" href="css/bootstrap.css">
        <link rel="stylesheet" href="css/main.css">



        <script src="js/vendor/modernizr-2.8.3.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/main.js"></script>
    </head>
<body>

<div class="container">
    <div class="row">
        <div class="col-lg-4">
             <h1 class="page-header">Thumbnail Gallery</h1>

            <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="This is my title" data-caption="Some lovely red flowers" data-image="http://www.picturesnew.com/media/images/car-image.jpg" data-target="#image-gallery">
                    <img class="img-responsive" src="http://www.picturesnew.com/media/images/car-image.jpg" alt="Short alt text" />
                </a>

            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="image-gallery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>

                </button>
                 <h4 class="modal-title" id="image-gallery-title"></h4>

            </div>
            <div class="modal-body">
                <img id="image-gallery-image" class="img-responsive" src="" />
            </div>
            <div class="modal-footer">
                <div class="col-md-2">
                    <button type="button" class="btn btn-primary" id="show-previous-image">Previous</button>
                </div>
                <div class="col-md-8 text-justify" id="image-gallery-caption">This text will be overwritten by jQuery</div>
                <div class="col-md-2">
                    <button type="button" id="show-next-image" class="btn btn-default">Next</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

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

When using AngularJS filter, the comparator will evaluate to true and display the ng-repeat list even when the input

Recently, I stumbled upon this interesting example fiddle showcasing the use of a comparator parameter to filter exact matches: http://jsfiddle.net/api/post/library/pure/ The priority is supposed to be a number between 1-100, but due to inputting it as t ...

javascriptangularjs

Connect-Domain fails to detect errors in the scenario described below:

I have chosen to implement the connect-domain module (https://github.com/baryshev/connect-domain) in order to streamline error handling within my Express application. Although it generally functions as expected, there is a peculiar issue that arises when ...

javascriptnode.jsexpress

Combining data from various JSON files to create dynamic charts with Highcharts

At this moment, my Highchart code is set up in a way where I want to replace the static data-series values within the HTML file with information loaded from a JSON file. The current code appears as follows: <!doctype html> <script type="text/jav ...

javascriptjqueryjsonhighchartsgetjson

How to combine two tables in Sequelize using a one-to-many relationship

I'm currently working with two models: User and Foto. In my application, each User can have multiple fotos, and each foto is associated with only one user. My challenge lies in using the include function. I am able to use it when querying for the us ...

javascriptnode.jspostgresqlsequelize.js

Leveraging the power of Map and Sort to display the items containing image URLs alongside their respective timestamps

I'm diving into firebase and utilizing react, and currently I've come across this snippet of code: {photos.map(url => ( <div key={url} style={card}> <img src={url} style={image} /> <div s ...

javascriptreactjsobjectjavascript-objects

Point the direction to nextjs and react native expo web

I am currently working on redirecting a URL to another within my website, specifically in Next.js and Expo React Native Web. While I don't have an actual "About" page, I do have other pages nested under the "about" folder and am aiming to direct any ...

javascriptreactjsnext.jsexporeact-native-web

Display the changing value at the beginning of the drop-down menu

I'm currently working on an AngularJS forEach loop where I need to display a dropdown list with dynamic values. The goal is to have the value stored in $scope.showCurrentProgram as the first selected element in the dropdown list when the page loads, a ...

javascripthtmlangularjs

Having difficulty aligning the container div in the center

I'm trying to create a centered grid of full-width buttons, but for some reason, I just can't seem to get the container centered. Any suggestions? Check out the code here - https://jsfiddle.net/a6qo6tzL/ Thank you! <div class="Wrapper"> ...

htmlcsscentering

Utilizing Multi External CDN JavaScript File with Vue CLI Component: A Comprehensive Guide

I've been trying different methods to include external JS files in a Vue Component, such as using mounted() and created(), but unfortunately, none of them have worked for me so far. I'm not sure where I'm going wrong. Any assistance would be ...

javascriptvue.js

Looking to add a dropdown feature to my current main navigation bar

I've been struggling to add a drop-down menu to my website's main menu. Every time I try, something goes wrong - sometimes the menu appears inline, other times it completely messes up the layout. Here is the HTML code snippet: <ul class="m ...

javascriptjqueryhtmlcss

Utilize the key as the value for options within an object iteration in Vue.js

I have an object called colors, which stores color names: { "RD": "Red", "BL": "Blue", "GR": "Green", "YW": "Yellow" } In my dropdown menu, I'm generating options for each color in the colors object: <select v-model="colors"> <op ...

javascriptvue.js

Updating the value property of an object within a loop dynamically in React

At the moment, I am utilizing an array of objects called "mainArr" as shown below, I have implemented a loop inside a function to filter object properties, but I want to dynamically replace obj.name with obj."param" based on the parameter passed. Both nam ...

javascriptreactjs

The Vue Router hooks are not being activated within the component when utilizing Typescript

I've been pondering this issue for quite some time. Despite my extensive search efforts, I am still unable to figure out why the route-hooks are not working in my component: 1. The component is being loaded from RouterView: <router-view class="z1 ...

javascripttypescriptvue.jsvue-componentvue-router

Can one extract a property from an object and assign it to a property on the constructor?

Currently working with TypeScript, I am looking to destructure properties from an object. The challenge lies in the fact that I need to assign it to a property on the constructor of the class: var someData = [{title: 'some title', desc: 'so ...

javascripttypescriptdestructuring

Tips for creating custom CSS to target a specific element within a group of similar elements

My cssSelector for locating elements is div.formErrorContent. There are 4 matched elements, but I need to pinpoint the first element. Can anyone assist me with this? I am aware of how to write the xpath code for this: (//div[@class='formErrorContent ...

cssselenium-webdriver

The tooltip being displayed is plain and lacks any design elements

When I hover over my a element, only a simple tooltip appears without any styling, unlike what is shown in the Bootstrap documentation. (I am creating the a element using JavaScript) HTML <!DOCTYPE html> <html lang="en"> <head> ...

javascripthtmlcssbootstrap-5jquery-ui-tooltip

Navigating Cross-Origin Resource Sharing (CORS) Challenges within

Currently in the process of developing an API utilizing our API server script and attempting to establish communication with the API on the IONIC framework application. Progress is being made, however, encountering a recurring issue with the cross-origin b ...

javascriptandroidangularjsionic-framework

Why does the for loop assign the last iteration of jQuery onclick to all elements?

I've encountered an issue with my code that I'd like to discuss var btns = $('.gotobtn'); $('#'+btns.get(0).id).click(function() { document.querySelector('#navigator').pushPage('directions.html', myInf ...

javascriptjqueryhtml

Wildcard routes for publicly accessible files

I have a collection of "widgets" with both client and server-side .coffee files (client representing Backbone.js model/view and server corresponding to ExpressJS routes), all organized within the main project directory: my-node-expressjs3-project/ src/ ...

javascriptnode.jscoffeescriptexpress

Prevent left click on HTML canvas and enable right click to pass through with pointer-events

In my scenario, I have an HTML canvas positioned above various other HTML elements that detect right-click mouse events. The goal is to be able to draw on the canvas with the left mouse button while simultaneously interacting with the underlying HTML eleme ...

javascripthtml5-canvasmouseeventkineticjs