Question

之前我曾使用模态和旋转木马，但我无法破解这个。我有一个图像网格，我希望每个图像打开一个引导模态窗口，并能够通过图像旋转。

我花时间在这个网站上：https://noreiller.github.io/bootstrap-modal-carousel/modal-carousel.html但是我无法让它工作。

我正在接管一个现有的应用程序，所以这里有额外的代码用于“以后可能需要的其他东西”，所以我把它留在了。我认为那里有一些东西正在打破它。

以下是我正在使用的库：

<link rel="stylesheet" href="styles/style.css">
<link rel="stylesheet" href="styles/framework.css">
<link rel="stylesheet" href="styles/bootstrap.min.css">
<link rel="stylesheet" href="styles/bootstrap-theme.css">

<script src="https://code.jquery.com/jquery-2.2.4.min.js"   integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script>
<script src="scripts/jqueryui.js"></script>
<script src="scripts/bootstrap.min.js"></script>
<script src="scripts/bootstrap-modal-carousel.js"/></script/>

<script src="scripts/custom.js"></script>
<script src="scripts/framework.js"></script>
<script src="scripts/framework.launcher.js"></script>

Javascript模式调用打开图片点击：

<script type="text/javascript">

$(document).ready(function() {

    $('.modalImg').on('click',function()
    {
        var sr=$(this).attr('src');
        $('innerModal').sttr('src',sr);
        $("#myModal").modal('show');
    });
});

</script>

以下是模态和轮播代码：

    <div class="flex-container1">
    <div class="imGrid1">

        <!-- Parts Depot -->

        <div class="flex-item1 group1">
            <!-- Image to Trigger Modal -->
            <a href="#myModal" class="modalImg image-border image-border" data-toggle="modal"><img src="images/map/small/parts-depot-sm.jpg"></a>

            <div class="image-caption-box">
                <a href="#myModal" class="content-thumb" data-slide-to="0" draggable="false" data-toggle="modal"> 
                    <p>Parts Depot</p>
                    <p class="plus-icon">+</p></a>
                </div>
            </div>

    </div>

这是结果。图像相互叠加。在另一次迭代中，我切换了图像，但是在点击它们之后它们会切换回来。

非常感谢您的帮助！

Result

Modal内部的轮播不起作用

0 个答案: