PoPup с контентом: запрещаем прокрутку сайта разрешаем прокрутку контента во всплывающем окне
Category: CSS code examples, JavaScript Code Examples, JS code examples
При использовании всплывающих окон созданных с помощью fancybox может возникать проблема: на мобильных устройствах при попытке пролистать контент окно закрывается или перематывается сайт под всплывающим окном, а сам контент в popup’е – не листается.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>sapid.info popup with content</title>
<meta content="width=device-width,initial-scale=1.0" name="viewport"></meta>
</head>
<body onload="popup('SIpopup')">
<div>
<p><b><a href="#" onclick="popup('SIpopup')">Open PopUp</a></b>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc a diam a urna condimentum scelerisque ut at massa. Suspendisse id molestie nisl. Fusce vitae magna pellentesque, pretium augue quis, ultricies tellus. Nullam et ornare mauris, ac sollicitudin nunc. Fusce mollis quam ac condimentum aliquam. Nullam scelerisque, urna sed rhoncus mollis, nulla quam vulputate nisi, eget sodales libero dolor in nisl. Mauris ut ipsum sit amet sem sollicitudin consequat. Quisque malesuada sollicitudin turpis. Sed lobortis vestibulum risus, vitae porta mi scelerisque porta. Phasellus luctus tellus non dolor consequat, vel pretium sapien aliquam. Integer ultricies at lorem non elementum. Donec quis velit maximus, consectetur urna sed, dignissim risus.
</p><p>Suspendisse maximus gravida lectus, nec consequat ipsum. Proin fringilla dignissim purus a varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas vestibulum tempor velit, fermentum vestibulum justo ullamcorper sit amet. Sed quis fermentum sapien. Cras rutrum vel risus ut mollis. Integer justo purus, rhoncus non nibh sit amet, tempor bibendum augue. Nulla pretium ante et sapien blandit, at commodo eros dignissim. Sed quis risus vestibulum, ornare dui ac, ultrices diam. Fusce velit erat, sagittis nec dui ut, volutpat eleifend erat. Vestibulum sagittis auctor augue, ac vestibulum magna suscipit et. Vivamus elementum metus vel enim vulputate posuere.
</p><p>Vestibulum hendrerit viverra arcu et egestas. Proin et tincidunt orci. Donec sodales, nisi quis scelerisque venenatis, justo neque volutpat nulla, eget laoreet velit odio in leo. Curabitur mattis aliquam consequat. Morbi eros ante, eleifend laoreet felis vel, sagittis venenatis leo. Sed aliquam, nisi in tristique sagittis, nibh nisi aliquam arcu, quis fringilla nibh elit at orci. Donec quis nulla sit amet massa tincidunt varius. Nulla facilisi. Donec fringilla magna ipsum, at pellentesque ex consectetur eu. Donec tellus orci, aliquet ac dolor eu, pulvinar tincidunt ipsum. Maecenas vitae luctus risus, hendrerit tempor quam. Suspendisse massa erat, aliquet non faucibus id, posuere ut nulla. Vestibulum elementum, arcu id pellentesque sagittis, lectus ante dapibus ipsum, sit amet elementum urna ex non urna. Vestibulum scelerisque ornare condimentum.
</p><p>Vivamus a urna tempor, pulvinar arcu ac, pellentesque lectus. Pellentesque posuere, eros vitae mattis auctor, eros eros viverra mi, tempor lobortis sapien mauris tempor neque. Nunc tempor et neque ac sollicitudin. Aenean in eros eros. Morbi vel leo lobortis, vehicula orci vel, fermentum tellus. Aliquam elementum nisi id justo commodo ullamcorper. Etiam eget luctus dolor. Cras finibus mi nec semper suscipit. Nunc lacinia in sem et finibus. Mauris ante metus, maximus eget magna vitae, ullamcorper egestas ligula. Sed vitae odio eu mi bibendum faucibus in id ante. Cras ornare dui ex, eu eleifend nunc euismod a. Vestibulum molestie sem ante, nec auctor nisi hendrerit sed. Donec hendrerit felis fringilla nunc aliquam malesuada. Curabitur vitae augue mauris. Aenean scelerisque fermentum erat ac tincidunt.
</p><p>Mauris pulvinar mollis neque nec malesuada. Morbi ut commodo metus. Aenean eget libero lobortis, consequat nisl sed, rutrum diam. Vivamus tempus laoreet velit sed sagittis. Mauris eu massa turpis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi consequat vehicula lacus ac fringilla. Nunc sit amet elementum quam, quis eleifend diam.
</p><p>Proin posuere ipsum nec velit maximus, ac semper est dapibus. Cras lobortis quam lorem, vel ullamcorper purus volutpat vel. Donec auctor id leo quis placerat. Sed nec orci sapien. Integer ac urna lorem. Vivamus lacinia eros dapibus, mollis lacus eu, dictum massa. Integer efficitur accumsan dui eu aliquam. Donec tristique convallis est nec tincidunt. Nunc orci velit, tincidunt vitae nisl vestibulum, vehicula viverra libero. Pellentesque ut dictum eros, non tempus velit. Vestibulum enim tellus, porttitor a vulputate vel, aliquet tempus est. Duis non nisl ex. Nulla sed turpis ut risus lacinia laoreet. Quisque gravida diam eu fringilla porttitor.
</p><p>Vestibulum a gravida turpis. Maecenas lorem lacus, malesuada in dolor nec, hendrerit tincidunt urna. Quisque libero est, imperdiet fringilla ullamcorper in, dictum ac turpis. Sed semper ipsum leo, nec vulputate massa vehicula vitae. Vivamus efficitur, ex non feugiat vehicula, nunc lectus euismod tellus, non posuere ligula quam vel erat. Donec augue sem, dictum et nisi at, ullamcorper ullamcorper lectus. Nullam mattis euismod sem ut tempus. Sed et mauris justo. Integer ornare scelerisque magna dapibus sodales. Nam eget felis quis leo porta fringilla. Donec felis elit, efficitur sed vehicula id, consectetur a leo. In sed feugiat mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum vel diam et risus congue iaculis. Mauris blandit est mi, quis volutpat urna iaculis vel. Vivamus ex nisl, pharetra at placerat ut, vestibulum et lectus.
</p><p>Etiam vel nisi venenatis, vehicula ligula vel, efficitur dolor. Maecenas ac metus erat. Quisque rutrum sem vel tellus laoreet, a volutpat nunc hendrerit. Ut feugiat tempor nunc, vulputate facilisis ante eleifend sodales. Duis varius lacinia purus, non maximus libero finibus vitae. Aenean varius arcu eget ultricies lobortis. Duis ornare ex auctor ipsum pulvinar mollis. Donec porta, metus sed auctor finibus, nisl ante pretium dolor, vitae vehicula ligula libero ac lectus. Etiam volutpat justo in elit commodo suscipit. Curabitur a felis eu lectus posuere pretium. Suspendisse rutrum laoreet risus non condimentum. Sed nisi enim, tincidunt non magna eget, commodo placerat orci. Nulla consequat nibh nunc. Mauris maximus orci lectus, sed dignissim ligula fringilla id.
</p><p>Nunc dictum egestas vehicula. Duis efficitur odio eget urna rutrum, a lobortis urna placerat. Praesent leo est, fermentum vel tellus ut, rhoncus vehicula dui. Maecenas posuere, orci vitae semper malesuada, sapien justo dictum turpis, sed gravida odio libero a nibh. Nullam eu ligula rutrum, blandit purus ac, laoreet nibh. Pellentesque dui sem, bibendum eget consectetur vitae, laoreet non leo. Morbi quis malesuada velit. Nullam vehicula at augue viverra vehicula. Proin commodo ex tellus, id pharetra turpis tristique eget. Nulla placerat eleifend turpis sed pulvinar. Maecenas sit amet velit id augue rutrum porta et quis tortor. Morbi interdum at tortor ut feugiat. Phasellus elementum venenatis neque, eget dignissim magna iaculis ac. Vivamus malesuada quam in lectus pulvinar, at aliquam tellus suscipit.
</p><p>Integer bibendum magna lectus, eu tincidunt neque sagittis ut. Fusce sit amet elementum turpis, vel euismod tortor. Integer ultricies enim sit amet vehicula interdum. Donec vel tincidunt massa. Nulla diam enim, viverra eu porttitor eget, varius eget dui. In pharetra dapibus lacus a suscipit. In maximus lorem commodo quam mollis tempor. Maecenas finibus, metus eget faucibus auctor, elit neque sodales risus, quis tincidunt mauris est a sapien. Duis vitae eros ac nulla interdum dictum id in est. Cras finibus urna sit amet lorem hendrerit, ut pharetra lorem maximus.
</p><p>Phasellus volutpat cursus nisl, vel pellentesque nisl elementum vitae. Mauris maximus dolor libero, ut congue tortor bibendum eu. Curabitur varius urna et magna suscipit, quis sagittis enim egestas. Nunc vel eros commodo dolor mollis accumsan vel eu justo. Sed quis tortor neque. Quisque porta eget dui eu commodo. Donec consectetur tincidunt arcu quis consectetur. Phasellus quis vehicula sem. Duis sollicitudin nunc dui, ut pharetra lectus mollis sed. Sed pellentesque laoreet magna vitae viverra. Nulla vitae vehicula ipsum. Maecenas elementum ultricies tristique. Mauris ut lacus egestas, efficitur massa id, auctor justo. Cras sollicitudin urna quis magna facilisis, in euismod dolor pharetra.
</p><p>Aenean tristique, purus ut porta fermentum, mauris felis viverra velit, at tincidunt elit magna a metus. Nam rhoncus orci quis orci egestas, quis volutpat sem laoreet. Integer vitae arcu eu dui porttitor dictum. Donec fermentum turpis a eros vestibulum, sit amet pulvinar nisl fringilla. Sed accumsan dolor lectus, vel ultrices velit mattis id. Fusce tincidunt, lectus id feugiat molestie, leo neque eleifend arcu, quis feugiat nibh diam et diam. Donec varius at magna nec ornare. Morbi pellentesque semper ultrices. Morbi tempor vitae ante et pellentesque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam vel eros velit. Vestibulum vel molestie erat, fringilla sodales diam.
</p><p>Nulla facilisi. Mauris pellentesque massa eu pulvinar aliquet. Aenean magna justo, vulputate id malesuada sit amet, porta a mauris. Duis sed sagittis est, sed efficitur tortor. Proin sit amet lorem ut orci ornare lacinia. Nunc augue ante, pellentesque vitae mollis ac, auctor cursus orci. Integer eget odio libero.
</p><p>Maecenas ut lacinia dui, et placerat orci. Curabitur in mollis nibh. Donec non bibendum velit. Ut nec sem vitae nisl hendrerit sodales. Aenean blandit condimentum metus at posuere. Nullam non magna lorem. Quisque turpis mauris, congue et enim lobortis, finibus elementum elit. Suspendisse interdum quis tortor in vulputate. Suspendisse porta porta tincidunt. Nam dolor lectus, eleifend sed tempor eget, consectetur non odio.
</p><p>Ut imperdiet aliquam diam, quis volutpat nisl maximus ac. Fusce bibendum neque id nulla ornare posuere. Phasellus ac luctus nisi. Proin ut augue sit amet diam interdum bibendum. Vestibulum ullamcorper tellus ut nulla ullamcorper, ac iaculis nulla finibus. Nam bibendum lacus a dui ultrices venenatis. Ut in elit nisl. Mauris consequat malesuada eros et suscipit.
</p><p>Suspendisse pellentesque tempor eros et varius. Suspendisse blandit, orci sed dignissim condimentum, felis neque porttitor sem, ac euismod augue tortor ac nulla. Donec mollis sagittis pretium. Maecenas convallis nibh a volutpat suscipit. Vestibulum blandit turpis sit amet felis dictum, eu laoreet quam convallis. Sed laoreet ut leo in convallis. Curabitur vitae erat tincidunt, cursus ante nec, feugiat lacus.
</p><p>Morbi egestas dolor a lacus viverra pellentesque. Donec auctor risus nec urna bibendum varius. Suspendisse non turpis sed tellus lobortis vestibulum in sit amet lectus. Ut et erat id nibh auctor iaculis. Cras interdum nec libero sit amet tristique. Curabitur ac lacus ac felis porta rhoncus. Pellentesque blandit in dui posuere egestas. Quisque nec quam eget ipsum volutpat consectetur. Mauris in dignissim urna, nec blandit ligula. Sed erat eros, congue ut dui eu, scelerisque bibendum nibh. Etiam eu sem purus.
</p><p>Curabitur vitae risus in odio viverra dictum. Aliquam id sem nibh. Maecenas non commodo lacus. Quisque id eros in est laoreet porttitor eget quis eros. Aenean vestibulum vel felis aliquet venenatis. Nunc ultrices vehicula neque in consectetur. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec congue leo condimentum egestas consequat. Integer a tincidunt elit. Proin vel semper velit. Aliquam eu nisi metus. Aenean sed elementum ipsum. Vivamus a quam ac magna lacinia tempor non id quam. Duis tempor in velit vitae sodales. Quisque ac nulla a tortor convallis ullamcorper. Quisque eleifend tincidunt orci, ullamcorper eleifend massa mattis quis.
</p><p>Donec nulla enim, commodo et sodales bibendum, tincidunt porttitor purus. Fusce egestas interdum cursus. Phasellus et mauris orci. Nam in congue sem, id lobortis lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque tempus, tortor sed mollis faucibus, mauris enim dictum lorem, ac pulvinar libero urna ut turpis. Donec congue purus a viverra maximus. Aenean elit urna, porta eu convallis at, ultricies eu quam. Vestibulum fermentum, nisl eget porttitor lacinia, massa mi cursus turpis, ut condimentum neque neque sed eros. Fusce dignissim id velit id rutrum. Nullam id imperdiet nisi. Ut rutrum tristique felis. Nunc maximus purus non nibh tincidunt pharetra. Vestibulum vitae interdum metus. Vestibulum eu justo semper, efficitur diam sed, interdum ligula. Fusce bibendum ultricies ante in laoreet.
</p><p>Mauris faucibus varius massa et porttitor. Donec ut lorem tristique, rhoncus arcu aliquam, luctus quam. Vivamus sodales facilisis metus, vitae mattis urna lacinia quis. Nullam eleifend placerat convallis. In pretium ipsum nibh, at porta dui pulvinar vel. Maecenas ac rhoncus ipsum, sit amet porttitor ante. Pellentesque vel sem urna. Nullam ultricies quam vel ante volutpat, vel volutpat risus cursus. Vestibulum vel tempus elit. Mauris id odio egestas, ullamcorper neque quis, vulputate lectus. Cras semper pulvinar nulla feugiat dictum. Aenean dignissim, diam fermentum facilisis finibus, ipsum erat pulvinar arcu, viverra fringilla massa est et lacus.
</p><p>Proin ullamcorper semper mauris, id ultrices tortor fermentum at. Cras sed venenatis diam. Suspendisse non nibh vel erat efficitur dictum ac at urna. Integer eget nibh at sapien malesuada accumsan. Donec suscipit ipsum a dui scelerisque ultrices. Nunc finibus sem nulla, ac mollis elit aliquam eu. Morbi vitae lorem in arcu auctor finibus a sed orci. Sed et consectetur tortor.
</p><p>Fusce gravida ullamcorper elementum. Suspendisse eleifend tellus eget justo luctus, sit amet iaculis mi gravida. Praesent gravida ex scelerisque, tristique purus eget, ullamcorper lacus. Vestibulum sed justo at purus posuere rutrum. Donec ultrices a sapien ut accumsan. Mauris bibendum vel mi pharetra imperdiet. Ut sagittis elit ipsum, in porta erat porta id.
</p><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse vel nunc congue, ullamcorper ex id, dignissim dui. Phasellus maximus nunc sit amet nisi fermentum eleifend. Nullam in orci lobortis, viverra ex rutrum, blandit purus. Cras vel lectus a risus aliquet lacinia. Quisque eleifend pharetra nibh, ut mollis dui aliquam quis. Ut sed elementum velit. Mauris porta leo et nulla eleifend, non luctus velit aliquam. Duis vel lectus ac mauris ultricies eleifend. Sed pulvinar gravida urna, eu pellentesque nulla. Pellentesque eget nisl sollicitudin, finibus leo in, consectetur ante. Suspendisse pretium augue elit, non efficitur leo pretium id. In hac habitasse platea dictumst. Donec placerat, nulla at dignissim condimentum, lectus felis mattis ligula, ut scelerisque velit diam sed arcu. In fermentum ultricies justo, quis tristique risus vehicula in. Suspendisse nec nunc arcu.
</p><p>In sed purus sed est pulvinar molestie a nec magna. Maecenas viverra faucibus nunc, quis consectetur urna pharetra in. Praesent massa sem, semper ut diam sed, varius pretium ligula. Sed suscipit lorem quis pharetra condimentum. Integer porttitor erat id pulvinar lobortis. Etiam magna odio, lobortis sed blandit et, hendrerit quis nisi. Mauris efficitur in urna a lobortis. Sed hendrerit tempus diam, sit amet elementum augue pretium id. Donec ut nisl et mauris congue suscipit eu a neque. Pellentesque hendrerit ut nisi eget porta. Integer vitae vehicula lectus. Sed quis malesuada leo. Curabitur interdum diam quis ligula vulputate blandit.
</p><p>Sed eu arcu sit amet nisl viverra gravida nec vitae massa. Nullam vel diam dui. Quisque pulvinar eleifend tincidunt. In dignissim luctus arcu, vel pharetra ex luctus et. Fusce non felis quis massa luctus molestie. Praesent malesuada lorem nec velit finibus, eget accumsan magna egestas. Aenean convallis volutpat orci sit amet tempus. Integer at elit id nulla porttitor laoreet. Cras sed justo lacinia, cursus eros sed, placerat elit. Duis quis ligula id justo aliquet vestibulum. Phasellus fermentum mauris et nunc dignissim, sed sollicitudin felis varius. Phasellus commodo dolor quis nibh maximus euismod at at turpis. Donec turpis diam, dictum id sapien vitae, auctor tristique nisi.
</p>
</div>
<!-- sapid.info popup with content html -->
<div id="SIblanket" style="display:none;"></div>
<div id="SIpopup" class="si_pwc" style="display:none;">
<div class="si_pwc_wrapper" >
<div class="si_pwc_close">
<a href="#" onclick="popup('SIpopup')" >
<svg viewBox="0 0 32 32"><path d="M10,10 L22,22 M22,10 L10,22"></path></svg>
</a>
</div>
<div class="si_pwc_content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc a diam a urna condimentum scelerisque ut at massa. Suspendisse id molestie nisl. Fusce vitae magna pellentesque, pretium augue quis, ultricies tellus. Nullam et ornare mauris, ac sollicitudin nunc. Fusce mollis quam ac condimentum aliquam. Nullam scelerisque, urna sed rhoncus mollis, nulla quam vulputate nisi, eget sodales libero dolor in nisl. Mauris ut ipsum sit amet sem sollicitudin consequat. Quisque malesuada sollicitudin turpis. Sed lobortis vestibulum risus, vitae porta mi scelerisque porta. Phasellus luctus tellus non dolor consequat, vel pretium sapien aliquam. Integer ultricies at lorem non elementum. Donec quis velit maximus, consectetur urna sed, dignissim risus.
</p><p>Suspendisse maximus gravida lectus, nec consequat ipsum. Proin fringilla dignissim purus a varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas vestibulum tempor velit, fermentum vestibulum justo ullamcorper sit amet. Sed quis fermentum sapien. Cras rutrum vel risus ut mollis. Integer justo purus, rhoncus non nibh sit amet, tempor bibendum augue. Nulla pretium ante et sapien blandit, at commodo eros dignissim. Sed quis risus vestibulum, ornare dui ac, ultrices diam. Fusce velit erat, sagittis nec dui ut, volutpat eleifend erat. Vestibulum sagittis auctor augue, ac vestibulum magna suscipit et. Vivamus elementum metus vel enim vulputate posuere.
</p><p>Vestibulum hendrerit viverra arcu et egestas. Proin et tincidunt orci. Donec sodales, nisi quis scelerisque venenatis, justo neque volutpat nulla, eget laoreet velit odio in leo. Curabitur mattis aliquam consequat. Morbi eros ante, eleifend laoreet felis vel, sagittis venenatis leo. Sed aliquam, nisi in tristique sagittis, nibh nisi aliquam arcu, quis fringilla nibh elit at orci. Donec quis nulla sit amet massa tincidunt varius. Nulla facilisi. Donec fringilla magna ipsum, at pellentesque ex consectetur eu. Donec tellus orci, aliquet ac dolor eu, pulvinar tincidunt ipsum. Maecenas vitae luctus risus, hendrerit tempor quam. Suspendisse massa erat, aliquet non faucibus id, posuere ut nulla. Vestibulum elementum, arcu id pellentesque sagittis, lectus ante dapibus ipsum, sit amet elementum urna ex non urna. Vestibulum scelerisque ornare condimentum.
</p><p>Vivamus a urna tempor, pulvinar arcu ac, pellentesque lectus. Pellentesque posuere, eros vitae mattis auctor, eros eros viverra mi, tempor lobortis sapien mauris tempor neque. Nunc tempor et neque ac sollicitudin. Aenean in eros eros. Morbi vel leo lobortis, vehicula orci vel, fermentum tellus. Aliquam elementum nisi id justo commodo ullamcorper. Etiam eget luctus dolor. Cras finibus mi nec semper suscipit. Nunc lacinia in sem et finibus. Mauris ante metus, maximus eget magna vitae, ullamcorper egestas ligula. Sed vitae odio eu mi bibendum faucibus in id ante. Cras ornare dui ex, eu eleifend nunc euismod a. Vestibulum molestie sem ante, nec auctor nisi hendrerit sed. Donec hendrerit felis fringilla nunc aliquam malesuada. Curabitur vitae augue mauris. Aenean scelerisque fermentum erat ac tincidunt.
</p><p>Mauris pulvinar mollis neque nec malesuada. Morbi ut commodo metus. Aenean eget libero lobortis, consequat nisl sed, rutrum diam. Vivamus tempus laoreet velit sed sagittis. Mauris eu massa turpis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi consequat vehicula lacus ac fringilla. Nunc sit amet elementum quam, quis eleifend diam.
</p><p>Proin posuere ipsum nec velit maximus, ac semper est dapibus. Cras lobortis quam lorem, vel ullamcorper purus volutpat vel. Donec auctor id leo quis placerat. Sed nec orci sapien. Integer ac urna lorem. Vivamus lacinia eros dapibus, mollis lacus eu, dictum massa. Integer efficitur accumsan dui eu aliquam. Donec tristique convallis est nec tincidunt. Nunc orci velit, tincidunt vitae nisl vestibulum, vehicula viverra libero. Pellentesque ut dictum eros, non tempus velit. Vestibulum enim tellus, porttitor a vulputate vel, aliquet tempus est. Duis non nisl ex. Nulla sed turpis ut risus lacinia laoreet. Quisque gravida diam eu fringilla porttitor.
</p><p>Vestibulum a gravida turpis. Maecenas lorem lacus, malesuada in dolor nec, hendrerit tincidunt urna. Quisque libero est, imperdiet fringilla ullamcorper in, dictum ac turpis. Sed semper ipsum leo, nec vulputate massa vehicula vitae. Vivamus efficitur, ex non feugiat vehicula, nunc lectus euismod tellus, non posuere ligula quam vel erat. Donec augue sem, dictum et nisi at, ullamcorper ullamcorper lectus. Nullam mattis euismod sem ut tempus. Sed et mauris justo. Integer ornare scelerisque magna dapibus sodales. Nam eget felis quis leo porta fringilla. Donec felis elit, efficitur sed vehicula id, consectetur a leo. In sed feugiat mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum vel diam et risus congue iaculis. Mauris blandit est mi, quis volutpat urna iaculis vel. Vivamus ex nisl, pharetra at placerat ut, vestibulum et lectus.</p>
</div>
</div>
</div>
<!-- /sapid.info popup with content html -->
<!-- sapid.info popup with content css -->
<style>
body {
margin: 0;
padding: 0;
}
.si_pwc {
position:fixed;
top: 0;
left: 0;
z-index: 999999;
height: calc(100vh - 60px);
padding: 30px;
background: #000000b5;
}
.si_pwc_wrapper {
position: relative;
background: white;
}
.si_pwc_close {
background-color: #49ab15;
height: 40px;
margin: 0;
position: absolute;
right: -22px;
top: -22px;
width: 40px;
z-index: 10;
line-height: 40px;
text-align: center;
}
.si_pwc_close a {
colour: white;
}
.si_pwc_close svg {
fill: transparent;
opacity: .8;
stroke: white;
stroke-width: 1.5;
transition: stroke .1s;
}
.si_pwc_content {
font-size: 14px;
line-height: 24px;
height: calc(100vh - 200px);
overflow-y: auto;
-webkit-overflow-scrolling:touch;
overflow-x: no-content;
padding: 10px 20px;
}
</style>
<!-- /sapid.info popup with content css -->
<!-- sapid.info popup with content js -->
<script src='https://code.jquery.com/jquery-latest.min.js'></script>
<script type="text/javascript">
function toggle(div_id) {
var el = document.getElementById(div_id);
if ( el.style.display == 'none' ) { el.style.display = 'block'; } else { el.style.display = 'none'; }
}
function popup(windowname) {
toggle('SIblanket');
toggle(windowname);
var viewportHeight = window.innerHeight;
var si_pwc_height = viewportHeight - 60;
var si_pwc_content_height = viewportHeight - 80;
$('.si_pwc').css({ height: si_pwc_height });
$('.si_pwc_content').css({ height: si_pwc_content_height });
}
</script>
<!-- /sapid.info popup with content js -->
</body>
</html>
