Merkezileştirme görüntülendiğinde pop-up kullanarak pop-up penceresini aç

Question

Bu site üzerinde fare komut betiği belgesini buldum ve gerçekten iyi ve kullanımı kolay bir şekilde çalışıyor. Bunun tek dezavantajı görüntüyü yerleştirdiği yer. Görüntü, kurye ile ilgili olarak yerleştirilir ve fare hareket ettirildiğinde onu takip eder.

Soru: Görüntünün görünür ekranda ortalanmış olarak görünmesi ve sabitlenmesi mümkün mü? (Sürece fare metnin üzerinde olduğu gibi bir pozisyonda düzeltildi.)

komut

var offsetX = 180; 
    var offsetY = -25; 
    $('a').hover(function(e) { 
    var href = $(this).attr('href');  
$('<img id="largeImage" src="' + href + '" alt="big image" />') 
.css('top', e.pageY + offsetY) 
.css('left', e.pageX + offsetX) 
.appendTo('body'); 
}, function() { 
$('#largeImage').remove(); 
}); 

$('a').mousemove(function(e) { 
$("#largeImage").css('top', e.pageY + offsetY).css('left', e.pageX + offsetX); 
}); 

Bu CSS stil

#largeImage { 
position:absolute; 
padding: .5em; 
background: #e3e3e3; 
border: 1px solid #BFBFBF; 
color:#aa1416; 
} 

HTML

<div class="largeImage"> 
    <li><h2><a id="item1"href="images/image6a.png">Breakfast Plates .....</a></h2> 
    </div> 

Answer 1

$('a').hover(function(e) { 
 
    var href = $(this).attr('href'); 
 
    $('<img id="largeImage" src="' + href + '" alt="big image" />') 
 
    .appendTo('body'); 
 
}, function() { 
 
    $('#largeImage').remove(); 
 
}); 
 

 
$('a').mousemove(function(e) {});

#largeImage { 
 
    position: fixed; 
 
    padding: .5em; 
 
    background: #e3e3e3; 
 
    border: 1px solid #BFBFBF; 
 
    color: #aa1416; 
 
    left: 50%; 
 
    top: 50%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="largeImage"> 
 
    <li> 
 
    <h2><a id="item1"href="images/image6a.png">Breakfast Plates .....</a></h2> 
 
</div>