居中&中间位置，而不考虑窗口滚动

Center & middle positioning regardless of window scroll

本文关键字：不考虑 窗口 滚动 位置 amp 中间 居中      更新时间：2023-09-26

我使用此页面上的"阅读更多"按钮来显示以前的（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>

有什么想法吗？

您的问题是，您设置了属性"href='#'"，因此当您单击它时，它会尝试以#anchor为目标，但由于找不到它，它只是将滚动设置为顶部。

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

或者在页面上设置锚点。

PS：或者可能将event.preventDefault();与jQuery 一起使用

相关文章：