javascript - 无论窗口滚动如何，居中和中间位置

Question

我正在使用此页面上的“阅读更多”按钮来显示之前的 (display:none) div: http://apexhubmobile.co.uk/corporate-friends

问题是当他们显示时，他们强制窗口到页面顶部以查看它，我尝试将定位更改为固定，然后直到我稍微滚动一下方框才正确显示。

我的目标是让隐藏的 div 显示在窗口的中心和中间，而不管用户在页面下方有多远。以下是一些代码摘录。

<style>
.b1 {float:left;width:292px;background-color:#F2F2F2;margin:0 4px 5px;vertical-align:middle;border:1px solid grey;line-height:0 !important;}
.b2 {line-height:0 !important;}
.f1 {z-index:999;background-color:white;border:1px solid; grey; position:fixed; top:50%; left:50%; height:430px; width:900px; margin:-215px 0 0 -450px; display:none;}
.f2 {width:100%;background-color:silver;text-align:center; font-size:1.2em; color:white;}
.f3 {position:absolute; right: 0;top: 2px; font-size:0.8em;color:black;}
.f4 {width:35%; height:410px; float:left; display:inline-block;padding:15px 0 0 15px;text-align:center;}
.f5 {width:35%;float:left;text-align:center;position:absolute;bottom:15px;}
.f6 {width:65%;float:left;display:inline-block;padding:15px;}

<div id="s38" class="f1"><div class="f2">SEMINARS@THIRTYEIGHT
<span class="f3">&nbsp;&#91; <a href="#" onclick="jQuery('#s38').css('display', 'none');">close</a> &#93;&nbsp;</span></div><div class="f4">
 <img src="http://apexhubmobile.co.uk/images/friends/Seminars38.png">
 <div class="f5"><a href="http://seminarsthirtyeight.com" target="new">www.seminarsthirtyeight.com</a></div></div><div class="f6">
Seminars@thirtyeight is a centre for continuing professional development for the whole dental team. Our practice and seminar facility are intimate and inspirational. They are the ‘first class’ end of dental education and mentoring. All of the courses are GDC verifiable.

Held within private dental practice 38 Devonshire Street, located in the heart of London’s Harley Street medical district, the aim at Seminars@thirtyeight is to give you an unsurpassed dental training experience, with some of the world’s most gifted dental mentors. Their relaxed and intimate venue ensures you the best opportunity to network at a professional level and meet the top researchers, opinion leaders and coaches within the dental industry.

 <div class="b1"><img src="http://apexhubmobile.co.uk/images/friends/16.png"><div class="b2"><a href="#" onclick="jQuery('#s38').css('display', 'initial');"><img src="http://apexhubmobile.co.uk/test/rm.png" onMouseOver="this.src='http://apexhubmobile.co.uk/test/rmy.png'" onMouseOut="this.src='http://apexhubmobile.co.uk/test/rm.png'"></a></div></div>

有什么想法吗？

Answer 1

您的问题是您设置了属性“href='#'”，因此当您单击它时它会尝试定位#anchor，但由于找不到它，它只是将滚动条设置到顶部。

您可以删除链接的 CSS 光标指针中的 href 属性和样式。

或者在您的页面上设置 anchor 。

PS : 或者可以使用 event.preventDefault(); 和 jQuery