如何在模态中弹出图像?

时间:2017-09-02 23:45:58

标签: javascript html twitter-bootstrap

嘿大家我想点击img时会在模态中弹出一个img弹出窗口。当单击img时,我将src放在一个变量中,然后将该src添加到我的模态中带有空白src的img中。出于某种原因,模态不会弹出。你能检查我的代码,看看有什么问题吗?

谢谢!我被困了这么久。

$(document).ready(function(){
    $('.imggallery2').slick({
        slidesToShow: 4,
        variableWidth: true,
        centerMode: true,
        nextArrow: "<span class = 'glyphicon glyphicon-arrow-right'>",
        prevArrow: "<span class = 'glyphicon glyphicon-arrow-left'>",
        slidesToScroll: 1
    });
    
   $("img").click(function(){
       var sr=$(this).attr('src');
       $('#mimg').attr('src',sr);
       $("#myModal").modal(); 
   });
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="blackpropixfallen.css">
<!-- Satisfy Google Font -->
<link href="https://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet">
<!-- Slick Carousel -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
    <div id="myModal" class="modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class = "reveal">
                    <!-- Modal Content (The Image) -->
                    <img  src="" id = "mimg" class = "modalimg" width = "280px" height = "280px">
                </div>
            </div>
        </div>
    </div>
        
    <div class = "imggallery2">
        <img src = "Fallengallery/IMG_4553.jpg">
        <img src = "Fallengallery/Interconnected.jpg">
        <img src = "Fallengallery/LifeLongLies pt.2 (yellow).jpg">
        <img src = "Fallengallery/Mornin' Murderin' Marauder (abstract).jpg">
        <img src = "Fallengallery/Mornin' Murderin' Marauder (Red).jpg">
        <img src = "Fallengallery/Nightfall (vibrant).jpg">
        <img src = "Fallengallery/Paris 15.jpg">
        <img src = "Fallengallery/Paris 18.jpg">
        <img src = "Fallengallery/Somebody's Watching.jpg">
    </div>
                
    <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

0 个答案:

没有答案