0

我有一个简单的模态脚本，过去可以正常工作，但由于某种原因，它会在第 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/

4

4 回答 4

0

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

于 2013-10-02T23:51:02.850 回答
0

您应该使用类选择器，并遍历它们，或者类似的东西来整合您的代码，并使用更少的代码。此外，降低了拼写错误或与语法相关的错误的机会。此外，它正在工作，但被放置在视口之外。只是缩小，你会看到。它的位置基于元素如何落在 dom 上。因此，只需修复您放置模态的方式。就这样！

于 2013-10-02T23:02:53.730 回答
0

在您引用的页面上更改position: [150, 70]为更高的值，这position: fixed会使您的模式出现在不可见的地方。position: [150, 70]到处放。此外，您应该遵循@Casey 的建议并使用迭代来减少代码量。

于 2013-10-02T23:08:46.047 回答
0

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

        $('.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"}                    
  });
于 2013-10-02T23:32:01.320 回答