Reply to thread

Message

<blockquote data-quote="Berk" data-source="post: 412359" data-attributes="member: 63611">ID meant to be onclick=&quot;toggleProfile(&lt;?php $array['id']; ?&gt;)&quot;. I messed it up.Modal only uses CSS. Here is it's CSS:[CODE]&lt;style&gt;.modalDialog {&nbsp; &nbsp; position: fixed;&nbsp; &nbsp; font-family: Arial, Helvetica, sans-serif;&nbsp; &nbsp; top: 0;&nbsp; &nbsp; right: 0;&nbsp; &nbsp; bottom: 0;&nbsp; &nbsp; left: 0;&nbsp; &nbsp; background: rgba(0,0,0,0.8);&nbsp; &nbsp; z-index: 99999;&nbsp; &nbsp; opacity:0;&nbsp; &nbsp; -webkit-transition: opacity 400ms ease-in;&nbsp; &nbsp; -moz-transition: opacity 400ms ease-in;&nbsp; &nbsp; transition: opacity 400ms ease-in;&nbsp; &nbsp; pointer-events: none;}.modalDialog:target {&nbsp; &nbsp; opacity:1;&nbsp; &nbsp; pointer-events: auto;}.modalDialog &gt; div {&nbsp; &nbsp; width: 700px;&nbsp; &nbsp; position: relative;&nbsp; &nbsp; margin: 10% auto;&nbsp; &nbsp; padding: 5px 20px 13px 20px;&nbsp; &nbsp; border-radius: 10px;&nbsp; &nbsp; background: white;&nbsp; &nbsp; height:500px;}.close {&nbsp; &nbsp; background: #606061;&nbsp; &nbsp; color: #FFFFFF;&nbsp; &nbsp; line-height: 25px;&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; right: -12px;&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; top: -10px;&nbsp; &nbsp; width: 24px;&nbsp; &nbsp; text-decoration: none;&nbsp; &nbsp; font-weight: bold;&nbsp; &nbsp; -webkit-border-radius: 12px;&nbsp; &nbsp; -moz-border-radius: 12px;&nbsp; &nbsp; border-radius: 12px;&nbsp; &nbsp; -moz-box-shadow: 1px 1px 3px #000;&nbsp; &nbsp; -webkit-box-shadow: 1px 1px 3px #000;&nbsp; &nbsp; box-shadow: 1px 1px 3px #000;}.close:hover { background: #00d9ff; }&lt;/style&gt;[/CODE]And to open, i do &lt;a href=&quot;#openModal&quot; &gt;Modal&lt;/a&gt; and for modal &lt;div id=&quot;openModal&quot;&gt;So if you have any better code, please share with me.</blockquote>

[QUOTE="Berk, post: 412359, member: 63611"] ID meant to be onclick="toggleProfile(<?php $array['id']; ?>)". I messed it up. Modal only uses CSS. Here is it's CSS: [CODE] <style>.modalDialog { position: fixed; font-family: Arial, Helvetica, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.8); z-index: 99999; opacity:0; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; pointer-events: none; } .modalDialog:target { opacity:1; pointer-events: auto; } .modalDialog > div { width: 700px; position: relative; margin: 10% auto; padding: 5px 20px 13px 20px; border-radius: 10px; background: white; height:500px; }.close { background: #606061; color: #FFFFFF; line-height: 25px; position: absolute; right: -12px; text-align: center; top: -10px; width: 24px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; } .close:hover { background: #00d9ff; }</style> [/CODE] And to open, i do <a href="#openModal" >Modal</a> and for modal <div id="openModal"> So if you have any better code, please share with me. [/QUOTE]

Verification

Reply to thread

Connect with us

Newest members