我目前正在研究这个 website如您所见,我有 2 个模态框,一个在左侧,一个在右侧 (第 i 个图标)。
我想做的是将模态按钮保持在相同位置,但使整个部分(带有女孩的图片和文本)可点击。
信息:我只能使用那个“i”图标作为模态按钮:/而且我只能编辑 CSS 而不是 HTML。
是否可以通过单击整个部分来打开模态窗口?
这里是一些代码:
HTML:
<div id="ts-vcsc-modal-5397504-container" class="ts-vcsc-modal-container">
<div id="ts-vcsc-modal-5397504-trigger" style="" class="ts-vcsc-modal-5397504-parent nch-holder ts-vcsc-font-icon ts-font-icons ts-shortcode ts-icon-align-center ">
<a href="#ts-vcsc-modal-5397504" class="nch-lightbox-modal no-ajaxy" data-width="1024" data-title="" data-open="false" data-delay="0" data-type="html" rel="" data-effect="slideUp" data-share="0" data-duration="5000" data-color="rgba(255,255,255,0.01)" data-lightbox-init="true">
<i class="ts-font-icon ts-awesome-info-circle" style="color: #ffffff; width:80px; height:80px; font-size:80px; line-height:80px;"></i></a></div>
<div id="ts-vcsc-modal-5397504" class="ts-modal-content nch-hide-if-javascript " style="display: none; padding: 15px; background: #0076bc;">
<div class="ts-modal-white-header"></div><div class="ts-modal-white-frame" style=""><div class="ts-modal-white-inner"><p></p>
<h2 style="text-align: left;"><span style="color: #ffffff;"><b>Wer seinen Mietvertrag im AQUILA bis 31.12.2016 unterzeichnet, erhält</b></span></h2>
<p><span style="color: #ffffff;">1 Nettomietzins geschenkt bei Einzug innert 3 Monaten</span><br>
<span style="color: #ffffff;"> 2 Nettomietzinse geschenkt bei Einzug per Dezember 2016</span></p>
<p><span style="color: #ffffff;">Zusätzlicher Weihnachtsgutschein von Sutter Begg oder AJ Salon hair & make up im Wert von CHF 1000.–</span></p>
</div>
</div>
</div>
</div>
感谢您的帮助。
最佳答案
.nch-lightbox-modal.no-ajaxy {
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
}
.ts-font-icon.ts-awesome-info-circle {
color: #ffffff;
width: 80px;
height: 80px;
font-size: 80px;
line-height: 80px;
position: absolute;
bottom: 25px;
right: 0;
}
在你的 anchor 标签和图标上试试这个
关于css - 模态按钮 : make the whole section clickable,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40522621/