Question

我一直在尝试制作一个jQuery弹出窗口，当用户点击图片时弹出窗口弹出窗口。当我把它放在一个新的html页面时，我可以让它像我想要的那样工作，但是一旦我把它放在我想要它的页面上，弹出窗口就不想出现了。一切都应该是一样的，所以我不明白为什么它不起作用。任何帮助将不胜感激。

使用：

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script>

    $(document).ready(function () 
    {
        $(".myImages").click(function () 
        {
            $("#dialog-message").dialog
            ({
                modal: true,
                show: "fade", 
                height: 300, 
                width: 400, 
                buttons: {Ok: function() 
                         {
                            $( this ).dialog( "close" );
                         }
                } 
            });
        });
    });


</script>

<style>

    #dialog-message {
        display: none;
        font-size:12px;
    }

    .ui-dialog-titlebar-close{
        display: none;
    }

    .ui-dialog {
    }

</style>

</head>

<body>

    <div id="dialog-message" title="Håndtering">
        <p>Vi finder frem til netop den indlæringmetode, der virker på din hest, når du skal lære hesten nye ting. Hvis der er opstået problemer med fx benløft, opsadling eller lignende, vil vi sammen prøve at analysere, om der kan være en dybereliggende årsag, mentalt eller fysisk, der skal arbejdes med, før vi indlærer hesten nyt. I modsat fald kan vi risikere, at vi blot lærer hesten at ”overhøre” ubehaget.</p>
    </div>
    <img src="../HesteGitte/testing/billeder/Undervisning/haandtering.jpg" id="undervisningIMG" class="myImages" /><br />
</body>
</html>

不起作用：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Undervisning</title>

<LINK REL="SHORTCUT ICON" HREF="../baggrund/favicon.ico" />
<link rel="stylesheet" href="../css/stylesheet.css" type="text/css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<script>

    $(document).ready(function () 
    {
        $(".myImages").click(function () 
        {
            $("#dialog-message").dialog
            ({
                modal: true,
                show: "fade", 
                height: 300, 
                width: 400, 
                buttons: {Ok: function() 
                         {
                            $( this ).dialog( "close" );
                         }
                } 
            });
        });
    });


</script>

<style>

    #dialog-message {
        display: none;
        font-size:12px;
    }

    .ui-dialog-titlebar-close{
        display: none;
    }

</style>

</head>

<body>

    <div id="dialog-message" title="Håndtering">
        <p>Vi finder frem til netop den indlæringmetode, der virker på din hest, når du skal lære hesten nye ting. Hvis der er opstået problemer med fx benløft, opsadling eller lignende, vil vi sammen prøve at analysere, om der kan være en dybereliggende årsag, mentalt eller fysisk, der skal arbejdes med, før vi indlærer hesten nyt. I modsat fald kan vi risikere, at vi blot lærer hesten at ”overhøre” ubehaget.</p>
    </div>
<div class="siteWrapper">
    <div class="contentWrapper">
        <div class="contentBackground">

            <p id="undervisningParagraph">
            <strong>Har du brug for hjælp til:</strong><br />
            </p>

            <div id="undervisningBoxWrapper">
                <div id="undervisningImageWrapper">
                    Håndtering<br />
                    <img src="../billeder/Undervisning/haandtering.jpg" id="undervisningIMG" class="myImages" /><br />
                </div>
                <div id="undervisningImageWrapper">
                    Trailertræning<br />
                    <img src="../billeder/Undervisning/trailertraening.jpg" id="undervisningIMG"/><br />
                </div>
                <div id="undervisningImageWrapper">
                    Longering<br />
                    <img src="../billeder/Undervisning/longering.jpg" id="undervisningIMG" /><br />
                </div>
                <div id="undervisningImageWrapper">
                    En god start med unghesten<br />
                    <img src="../billeder/Undervisning/unghest.jpg" id="undervisningIMG" /><br /> 
                </div>
                <div id="undervisningImageWrapper">
                    Grundopbygning af hesten<br />
                    <img src="../billeder/Undervisning/genopbyg.jpg" id="undervisningIMG" /><br />
                </div>
                <div id="undervisningImageWrapper">
                    Omtræning af hesten<br />
                    <img src="../billeder/Undervisning/omtraening.jpg" id="undervisningIMG" /><br />
                </div>
                <div id="undervisningImageWrapper">
                    Styrkelse af samspillet<br />
                    <img src="../billeder/Undervisning/samspil.jpg" id="undervisningIMG" /><br />
                </div>
                <div id="undervisningImageWrapper">
                    Tackling af negative oplevelser<br />
                    <img src="../billeder/Undervisning/rideangst.jpg" id="undervisningIMG" /><br />
                </div>
                <div id="undervisningImageWrapper">
                    Undervisning af børn<br />
                    <img src="../billeder/Undervisning/boern.jpg" id="undervisningIMG" /><br />
                </div>
            </div>

            <p id="undervisningParagraph">
            <br />
            Så er min undervisning måske noget for dig.<br />
            <br />  
            Undervisningen kan foregå, hvor det er relevant, dvs hos dig, i terrænet og, fra kommende sommer, på min ridebane.<br />
            <br /> 
            Ved regelmæssig undervisning aftaler vi "lektier" fra gang til gang.<br />
            <br /> 
            <strong>Pris:</strong> Lektion á 45 min 150 kr + evt. kørsel 1,5 kr pr km, som deles, hvis I er flere samme sted.<br />
             <br />
            Der er en rabat på 25 kr for medlemmer af <a href="http://www.hestelaug.dk//" id="pageLink">Hannenovskovens Hestelaug</a><br /> 
            </p>
        </div>
    </div>
</div>

Answer 1

在第二个图像中，只有第一个图像具有目标类，问题是脚本的交换，你必须在之前加载jQuery ，你可以加载jQuery UI

jQuery弹出窗口无法正常工作

1 个答案: