admin管理员组

文章数量:1387306

I have a modal dialog that appears when i click on a thumbnail. I have a js (grabbed from an online source) with a basic bootstrap grid layout.

The problem is that 50% of the popup seems to hang off the edge of the page. It seems to work hen i reduce the width of the page.

My code is as follows (nb; you dont need the js to see this)

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-patible" 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/bootstrap/3.0.0/css/bootstrap.min.css">

        <script src="js/vendor/modernizr-2.8.3.min.js"></script>
        <script src=".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=".jpg" data-target="#image-gallery">
                    <img class="img-responsive" src=".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>

I have a modal dialog that appears when i click on a thumbnail. I have a js (grabbed from an online source) with a basic bootstrap grid layout.

The problem is that 50% of the popup seems to hang off the edge of the page. It seems to work hen i reduce the width of the page.

My code is as follows (nb; you dont need the js to see this)

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-patible" 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./bootstrap/3.0.0/css/bootstrap.min.css">

        <script src="js/vendor/modernizr-2.8.3.min.js"></script>
        <script src="https://ajax.googleapis./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./media/images/car-image.jpg" data-target="#image-gallery">
                    <img class="img-responsive" src="http://www.picturesnew./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>

  • javascript
  • html
  • css
  • twitter-bootstrap
  • modal-dialog
Share Improve this question edited Jul 1, 2015 at 18:08 Fearghal asked Jul 1, 2015 at 17:35 FearghalFearghal 11.5k19 gold badges60 silver badges98 bronze badges
Add a ment  | 

4 Answers 4

Reset to default 4

The following fiddle shows the modal working.

As with the previous answer you should look at the structure of your HTML.

https://jsfiddle/6zzrL8ow/1/

<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./media/images/car-image.jpg" data-target="#image-gallery">
                    <img class="img-responsive" src="http://www.picturesnew./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>

Is the initial section within a row? if not, it should be. It seems that the modal section immediately follows the first section with col-lg-4. It could be offsetting the modal due to the 4 columns being reserved by the first section. Try wrapping that section in a row and leaving 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./media/images/car-image.jpg" data-target="#image-gallery">
                    <img class="img-responsive" src="http://www.picturesnew./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 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>

I was having the same issue and found it had nothing to do with how my modal html was set up. In my case my _Layout.cshtml was not referencing the correct stylesheet from my bootswatch theme. Correcting my style sheet reference fixed the issue.

I needed to replace

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

with

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

(replacing bootrap-cerulean with your custom stylesheet)

It's probably too late to help your situation but hopefully this helps someone else.

Answer was to remove the head ref below:

See below for a nice starting template for popup gallery with pictures on web (doesnt work for local pics, working that).

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-patible" 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./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./media/images/car-image.jpg" data-target="#image-gallery">
                    <img class="img-responsive" src="http://www.picturesnew./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>

本文标签： javascriptbootstrap modal dialog appearing at side of pageStack Overflow

版权声明：本文标题：javascript - bootstrap modal dialog appearing at side of page - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744567513a2613140.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。