1

私は奇妙な問題を抱えています。ホバーするとダイアログUIが開く複数のリンクがあります。問題は、最初の1つのリンクにカーソルを合わせてから、他のリンクにカーソルを合わせずにドキュメントの最後のリンクにカーソルを合わせると、ブラウザが最初のページビューの最後のリンク（または最初のページの折りたたみがある場所）に移動することです。私が何を台無しにしたか、どんな考えでも。これが完全なコードです。

    <pre><code>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery UI Dialog: Position relative to mouse event</title>

<!-- jQuery UI  |  http://jquery.com/  http://jqueryui.com/  http://jqueryui.com/docs/Theming  -->
<style type="text/css">body{font:62.5% Verdana,Arial,sans-serif} li.nostyle{list-style-type: none;}</style>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>

<style type="text/css">
  code { font-size: 2em; }
</style>

</head>
<body>

  <h1>Placing dialog box next to mouse hover07</h1>

  <a class="a1" href="#" style="font-size: 2em;"><img src="/ProductImagesh/tn_test07.jpg" title="" alt="6mm Round Facetted Assorted Good Quality Acrylic Beads Mix (1lb) - NEW." border="0" /></a>

  <div class="dialog" title="jQuery UI Dialog1" style="display:none">
   <div style="width: 50%; float:left;">
    <div class="rs-slideshow">
    <div class="slide-container">
        <img src="/images/working.gif"
            alt="The first image in a slideshow demo." title="This is the first slide" />
    </div>

    <ol class="slides">
        <li class="nostyle">
            <a href="/productimagesh/test07.jpg"/></a>
        </li>
    </ol>
    </div>
    </div>
    <div style="width: 50%; float:left; text-align:center;">
    <p style="padding: 10px;"><br/>Part Number: IS-200-00<br>Thank you! I tried it it single quotes before and it didn't work. I guess I wasn't paying attention to the double quotes, Thank you! I tried it it single quotes before and it didn't work. I guess I wasn't paying attention to the double quotesThank you! I tried it it single quotes before and it didn't work. I guess I wasn't paying attention to the double quotes </p>
    </div>
  </div>  
  <br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <h1>Placing dialog box next to mouse hover02</h1>

  <a class="a1" href="#" style="font-size: 2em;"><img src="/ProductImagesh/tn_test02.jpg" title="" alt="6mm Round Facetted Assorted Good Quality Acrylic Beads Mix (1lb) - NEW." border="0" /></a>

  <div class="dialog" title="jQuery UI Dialog2" style="display:none">
    <div style="width: 50%; float:left;">
    <div class="rs-slideshow">
    <div class="slide-container">
        <img src="/images/working.gif"
            alt="The first image in a slideshow demo." title="This is the first slide" />
    </div>

    <ol class="slides">
        <li class="nostyle">
            <a href="/productimagesh/test02.jpg"/></a>
        </li>
    </ol>
    </div>
    </div>
    <div style="width: 50%; float:left; text-align:center;">
    <p style="padding: 20px;"><br/>Part Number: IS-200-00<br>Thank you! I tried it it single quotes before and it didn't work. I guess I wasn't paying attention to the double quotes, Thank you! I tried it it single quotes before and it didn't work. I guess I wasn't paying attention to the double quotesThank you! I tried it it single quotes before and it didn't work. I guess I wasn't paying attention to the double quotes </p>
    </div>
  </div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <h1>Placing dialog box next to mouse hover03</h1>

  <a class="a1" href="#" style="font-size: 2em;"><img src="/ProductImagesh/tn_test03.jpg" title="" alt="6mm Round Facetted Assorted Good Quality Acrylic Beads Mix (1lb) - NEW." border="0" /></a>

  <div class="dialog" title="jQuery UI Dialog2" style="display:none">
    <div style="width: 50%; float:left;">
    <div class="rs-slideshow">
    <div class="slide-container">
        <img src="/images/working.gif"
            alt="The first image in a slideshow demo." title="This is the first slide" />
    </div>

    <ol class="slides">
        <li class="nostyle">
            <a href="/productimagesh/test03.jpg"/></a>
        </li>
    </ol>
    </div>
    </div>
    <div style="width: 50%; float:left; text-align:center;">
    <p style="padding: 10px;"><br/>Part Number: IS-200-00<br>Thank you! I tried it it single quotes before and it didn't work. I guess I wasn't paying attention to the double quotes, Thank you! I tried it it single quotes before and it didn't work. I guess I wasn't paying attention to the double quotesThank you! I tried it it single quotes before and it didn't work. I guess I wasn't paying attention to the double quotes </p>
    </div>
  </div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/> 
  <h1>Placing dialog box next to mouse hover04</h1>

  <a class="a1" href="#" style="font-size: 2em;"><img src="/ProductImagesh/tn_test04.jpg" title="" alt="6mm Round Facetted Assorted Good Quality Acrylic Beads Mix (1lb) - NEW." border="0" /></a>

  <div class="dialog" title="jQuery UI Dialog2" style="display:none">
    <div style="width: 50%; float:left;">
    <div class="rs-slideshow">
    <div class="slide-container">
        <img src="/images/working.gif"
            alt="The first image in a slideshow demo." title="This is the first slide" />
    </div>
    <ol class="slides">
        <li class="nostyle">
            <a href="/productimagesh/test04.jpg"/></a>
        </li>
    </ol>
    </div>
    </div>
    <div style="width: 50%; float:left; text-align:center;">
    <p style="padding: 10px;"><br/>Part Number: IS-200-00<br>Thank you! I tried it it single quotes before and it didn't work. I guess I wasn't paying attention to the double quotes, Thank you! I tried it it single quotes before and it didn't work. I guess I wasn't paying attention to the double quotesThank you! I tried it it single quotes before and it didn't work. I guess I wasn't paying attention to the double quotes </p>
    </div>
  </div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <h1>Placing dialog box next to mouse hover04</h1>

  <a class="a1" href="#" style="font-size: 2em;"><img src="/ProductImagesh/tn_test04.jpg" title="" alt="6mm Round Facetted Assorted Good Quality Acrylic Beads Mix (1lb) - NEW." border="0" /></a>

  <div class="dialog" title="jQuery UI Dialog2" style="display:none">
    <div style="width: 50%; float:left;">
    <div class="rs-slideshow">
    <div class="slide-container">
        <img src="/images/working.gif"
            alt="The first image in a slideshow demo." title="This is the first slide" />
    </div>
    <ol class="slides">
        <li class="nostyle">
            <a href="/productimagesh/test04.jpg"/></a>
        </li>
    </ol>
    </div>
    </div>
    <div style="width: 50%; float:left; text-align:center;">
    <p style="padding: 10px;"><br/>Part Number: IS-200-00<br>Thank you! I tried it it single quotes before and it didn't work. I guess I wasn't paying attention to the double quotes, Thank you! I tried it it single quotes before and it didn't work. I guess I wasn't paying attention to the double quotesThank you! I tried it it single quotes before and it didn't work. I guess I wasn't paying attention to the double quotes </p>
    </div>
  </div>
 <br/><br/><br/><br/><br/><br/><br/><br/><br/> 
   <h1>Placing dialog box next to mouse hover04</h1>

  <a class="a1" href="#" style="font-size: 2em;"><img src="/ProductImagesh/tn_test04.jpg" title="" alt="6mm Round Facetted Assorted Good Quality Acrylic Beads Mix (1lb) - NEW." border="0" /></a>

  <div class="dialog" title="jQuery UI Dialog2" style="display:none">
    <div style="width: 50%; float:left;">
    <div class="rs-slideshow">
    <div class="slide-container">
        <img src="/images/working.gif"
            alt="The first image in a slideshow demo." title="This is the first slide" />
    </div>
    <ol class="slides">
        <li class="nostyle">
            <a href="/productimagesh/test04.jpg"/></a>
        </li>
    </ol>
    </div>
    </div>
    <div style="width: 50%; float:left; text-align:center;">
    <p style="padding: 10px;"><br/>Part Number: IS-200-00<br>Thank you! I tried it it single quotes before and it didn't work. I guess I wasn't paying attention to the double quotes, Thank you! I tried it it single quotes before and it didn't work. I guess I wasn't paying attention to the double quotesThank you! I tried it it single quotes before and it didn't work. I guess I wasn't paying attention to the double quotes </p>
    </div>
  </div>
 <br/><br/><br/><br/><br/><br/><br/><br/><br/> 
   <h1>Placing dialog box next to mouse hover04</h1>

  <a class="a1" href="#" style="font-size: 2em;"><img src="/ProductImagesh/tn_test04.jpg" title="" alt="6mm Round Facetted Assorted Good Quality Acrylic Beads Mix (1lb) - NEW." border="0" /></a>

  <div class="dialog" title="jQuery UI Dialog2" style="display:none">
    <div style="width: 50%; float:left;">
    <div class="rs-slideshow">
    <div class="slide-container">
        <img src="/images/working.gif"
            alt="The first image in a slideshow demo." title="This is the first slide" />
    </div>
    <ol class="slides">
        <li class="nostyle">
            <a href="/productimagesh/test04.jpg"/></a>
        </li>
    </ol>
    </div>
    </div>
    <div style="width: 50%; float:left; text-align:center;">
    <p style="padding: 10px;"><br/>Part Number: IS-200-00<br>Thank you! I tried it it single quotes before and it didn't work. I guess I wasn't paying attention to the double quotes, Thank you! I tried it it single quotes before and it didn't work. I guess I wasn't paying attention to the double quotesThank you! I tried it it single quotes before and it didn't work. I guess I wasn't paying attention to the double quotes </p>
    </div>
  </div>
 <br/><br/><br/><br/><br/><br/><br/><br/><br/> 
   <h1>Placing dialog box next to mouse hover04</h1>

  <a class="a1" href="#" style="font-size: 2em;"><img src="/ProductImagesh/tn_test04.jpg" title="" alt="6mm Round Facetted Assorted Good Quality Acrylic Beads Mix (1lb) - NEW." border="0" /></a>

  <div class="dialog" title="jQuery UI Dialog2" style="display:none">
    <div style="width: 50%; float:left;">
    <div class="rs-slideshow">
    <div class="slide-container">
        <img src="/images/working.gif"
            alt="The first image in a slideshow demo." title="This is the first slide" />
    </div>
    <ol class="slides">
        <li class="nostyle">
            <a href="/productimagesh/test04.jpg"/></a>
        </li>
    </ol>
    </div>
    </div>
    <div style="width: 50%; float:left; text-align:center;">
    <p style="padding: 10px;"><br/>Part Number: IS-200-00<br>Thank you! I tried it it single quotes before and it didn't work. I guess I wasn't paying attention to the double quotes, Thank you! I tried it it single quotes before and it didn't work. I guess I wasn't paying attention to the double quotesThank you! I tried it it single quotes before and it didn't work. I guess I wasn't paying attention to the double quotes </p>
    </div>
  </div>
 <br/><br/><br/><br/><br/><br/><br/><br/><br/> 
   <h1>Placing dialog box next to mouse hover04</h1>

  <a class="a1" href="#" style="font-size: 2em;"><img src="/ProductImagesh/tn_test04.jpg" title="" alt="6mm Round Facetted Assorted Good Quality Acrylic Beads Mix (1lb) - NEW." border="0" /></a>

  <div class="dialog" title="jQuery UI Dialog2" style="display:none">
    <div style="width: 50%; float:left;">
    <div class="rs-slideshow">
    <div class="slide-container">
        <img src="/images/working.gif"
            alt="The first image in a slideshow demo." title="This is the first slide" />
    </div>
    <ol class="slides">
        <li class="nostyle">
            <a href="/productimagesh/test04.jpg"/></a>
        </li>
    </ol>
    </div>
    </div>
    <div style="width: 50%; float:left; text-align:center;">
    <p style="padding: 10px;"><br/>Part Number: IS-200-00<br>Thank you! I tried it it single quotes before and it didn't work. I guess I wasn't paying attention to the double quotes, Thank you! I tried it it single quotes before and it didn't work. I guess I wasn't paying attention to the double quotesThank you! I tried it it single quotes before and it didn't work. I guess I wasn't paying attention to the double quotes </p>
    </div>
  </div>
 <br/><br/><br/><br/><br/><br/><br/><br/><br/> 
   <h1>Placing dialog box next to mouse hover51</h1>

  <a class="a1" href="#" style="font-size: 2em;"><img src="/ProductImagesz/tn_test51.jpg" title="" alt="6mm Round Facetted Assorted Good Quality Acrylic Beads Mix (1lb) - NEW." border="0" /></a>

  <div class="dialog" title="jQuery UI Dialog2" style="display:none">
    <div style="width: 50%; float:left;">
    <div class="rs-slideshow">
    <div class="slide-container">
        <img src="/images/working.gif"
            alt="The first image in a slideshow demo." title="This is the first slide" />
    </div>
    <ol class="slides">
        <li class="nostyle">
            <a href="/productimagesz/is_test51.jpg"/></a>
        </li>
    </ol>
    </div>
    </div>
    <div style="width: 50%; float:left; text-align:center;">
    <p style="padding: 10px;"><br/>Part Number: IS-200-00<br>Thank you! I tried it it single quotes before and it didn't work. I guess I wasn't paying attention to the double quotes, Thank you! I tried it it single quotes before and it didn't work. I guess I wasn't paying attention to the double quotesThank you! I tried it it single quotes before and it didn't work. I guess I wasn't paying attention to the double quotes </p>
    </div>
  </div>


<script>

var dlg = $('div.dialog').dialog({
  autoOpen: false,
  draggable: false,
  resizable: false,
  width: 600,
  /*buttons: {
        "Ok": function(){ $(this).dialog("close"); }
    },*/
 });
var count1 = $('div').filter('.rs-slideshow').length;
   count1--;
$('a.a1').mouseover(function() {
   dlg.eq($('a.a1').index(this)).dialog('open');
   $(".rs-slideshow:eq(" + count1 + ")").rsfSlideshow('startShow');
}).mousemove(function(event) {
   dlg.dialog('option', 'position', {
    my: 'left top',
    at: 'right bottom',
    of: event,
    offset: '20 20'
  });
}).mouseout(function() {
  $(".rs-slideshow").rsfSlideshow('stopShow');
  dlg.dialog('close'); scrollTo(0, jQuery("body"));
});
$(document).ready(function () {
    $(".rs-slideshow").rsfSlideshow({
    interval: 0,
    transition: 0,
    loop: false, 
    autostart: false
    });
}); 
$(".ui-dialog-titlebar").hide();
</script>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://github.com/reallysimple/Really-Simple-Slideshow/raw/master/js/jquery.rs.slideshow.js"></script>
<script>
/**
*   Bootstrap the javascript
*/

$(document).ready(function () {

    $('.rs-slideshow').rsfSlideshow();

});
</script>   
</body>
</html>
 </code></pre>
4

0 に答える 0