Question

我正在使用此页面上的“阅读更多”按钮显示之前的（display：none）divs： 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 ='＃'”所以当你点击它时它会尝试定位＃锚，但是由于找不到它，它只是将滚动设置到顶部。

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

或者将锚点设置在您的页面上。

PS：或者可以在jQuery中使用event.preventDefault();

中心和中间定位，无论窗口滚动

1 个答案: