Question

我有一个简单的模态脚本，过去运行良好，但由于某种原因，它会拒绝在第10张图像后工作。

        <div class = "images_container"> <!-- Image 1 -->
            <div class = "images image_1">
                <div class = "hover_alpha">
                    <div class = "plus">

                    </div>
                </div>
            </div>

            <div class = "images image_2"> <!-- Image 2 -->
                <div class = "hover_alpha">
                    <div class = "plus">

                    </div>
                </div>
            </div>

            <div class = "images image_3"> <!-- Image 3 -->
                <div class = "hover_alpha">
                    <div class = "plus">

                    </div>
                </div>
            </div>

<div id="image_1_content"> 
        <img src = "images/1.jpg">
</div>
<div id="image_2_content"> 
        <img src = "images/2.jpg">
</div>
<div id="image_3_content"> 
        <img src = "images/3.jpg">

        $('.image_1').click(function () {
            $('#image_1_content').modal({
                close: true,
                overlayClose:true,
                position: [150,70],
                opacity:80,
                overlayCss: {backgroundColor:"#fff"}                    
            });

            return false;
        });

        $('.image_2').click(function () {
            $('#image_2_content').modal({
                close: true,
                overlayClose:true,
                opacity:80,
                position: [150,70],
                overlayCss: {backgroundColor:"#fff"}                    
            });

            return false;
        });

        $('.image_3').click(function () {
            $('#image_3_content').modal({
                close: true,
                overlayClose:true,
                opacity:80,
                position: [150,70],
                overlayCss: {backgroundColor:"#fff"}                    
            });

            return false;
        });

代码与第21张图片完全相同。但是，从第10张图像开始，脚本在第9张图像后拒绝工作。我很困惑为什么或如何发生这种情况。有什么输入吗？

参考：http://spuxystudios.com/cocktails/

Answer 1

您应该使用类选择器，并遍历它们，或者重要的事情来合并代码，并使用更少的代码。此外，降低拼写错误或语法相关错误的机会。此外，它正在工作，但被放置在视口之外。只需缩小即可看到。它基于元素如何落在dom上。所以只需修复你放置模态的方式。多数民众赞成！

Answer 2

在您引用的页面上，您将position: [150, 70]更改为更高的值，而position: fixed会使您的模态显示在不可见的位置。把position: [150, 70]放在任何地方。此外，您应该遵循@Casey建议并使用迭代来减少代码量。

Answer 3

查看网站的来源，您可以看到每一行图像的位置实际上是不同的。这是一个例子：

        $('.image_6').click(function () {
            $('#image_6_content').modal({
                close: true,
                overlayClose:true,
                opacity:80,
                position: [550,30],
                overlayCss: {backgroundColor:"#fff"}                    
            });

            return false;
        });
        $('.image_7').click(function () {
            $('#image_7_content').modal({
                close: true,
                overlayClose:true,
                opacity:80,
                position: [950,30],
                overlayCss: {backgroundColor:"#fff"}                    
            });

            return false;
        });

正如其他人所说，使用泛型类更好。您可以将内容放在同一个div中并默认隐藏它。

<div class="cocktails">
  <div class="cocktail">
    <img 1>
    <div class="more_info">modal content</div>
  </div>
  <div class="cocktail">
    <img 2>
    <div class="more_info">modal content</div>
  </div>
</div>

$('.cocktails').on('click', 'img', function() {
  $('.more_info', $(this)).modal({
    close: true,
    overlayClose:true,
    opacity:80,
    position: [150,70],
    overlayCss: {backgroundColor:"#fff"}                    
  });

Answer 4

像其他人注意到的那样，定位并不一致。我没有看到你的CSS，但也许你可以通过一些漂亮的CSS设置快速获胜。尝试相对于窗口定位弹出窗口

知道为什么我的简单脚本会在页面中间停止工作吗？

4 个答案: