Oh no! Where's the JavaScript?
Your Web browser does not have JavaScript enabled or does not support JavaScript. Please enable JavaScript on your Web browser to properly view this Web site, or upgrade to a Web browser that does support JavaScript.
Sign In
Not a member yet? Click here to register.

Integrate this kind of pop-up to a PHP Fusion powered site

Hi there!
I'm looking for a solution to integrate this kind of pop-ups into my PHP Fusion powered website.

http://simplemodal.plasm.it/

Thanks!
:G
dimki attached the following file:
jquery_popup_panel_v100.zip [49.89kB / 101 Downloads]
Yes, I know this infusion, but isn't even comparable with what I posted (didn't want to break the site rules).
I want to set a image, with option to click on it to go on a specific URL.
The question is how to use different jquerry pop-ups without affecting the jquerry that PHP-Fusion uses. Or how to even integrate that specific jquerry in the PHP Fusion .

Thanks!
Hello there....

simple like this, you don't need JS and/or jQuery to build those modal popups.

Example:
The CSS (just add it to the bottom of your styles.css):
CodeDownload  
.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: 400px;
    position: relative;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: #fff;
    background: -moz-linear-gradient(#fff, #999);
    background: -webkit-linear-gradient(#fff, #999);
    background: -o-linear-gradient(#fff, #999);
}
.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;
}


Feel free to style your own colors, forms and shadows.

and the HTML-Part for the content of the box:
CodeDownload  
<div id="testbox" class="modalDialog">
    <div>   <a href="#close" title="Close" class="close">X</a>

           <h2>EXAMPLE MODAL BOX</h2>
        <p>Your TEXT or CONTENT goes here</p>
        <p>You even can include external scripts, PHP, HTML or videos in here!</p>
    </div>
</div>



To open those boxes with a simple textlink for example, just use the NAME of the box as link:
CodeDownload  
<a href="#testbox">Open Testbox</a>



If you need more than one box, it's simple too. Just change the NAME of the box, like this for example:
CodeDownload  
<div id="another_box" class="modalDialog">
    <div>   <a href="#close" title="Close" class="close">X</a>

           <h2>ANOTHER BOX</h2>
        <p>Your TEXT or CONTENT goes here</p>
        <p>You even can include external scripts, PHP, HTML or videos in here!</p>
    </div>
</div>



and call it with it's name:
CodeDownload  
<a href="#another_box">Open Testbox</a>



And here we go, that's all you need ;)
With this you don't have any problems or conflicts with existing jQuery or javascripts.
Layzee, you deserve a cold beer! (ore more than 1, your call) Thanks!
Thread Information
Author
Replies
5 posts
Views
889 times
Last Post
Last updated on 5 years ago
You can view all discussion threads in this forum.
You cannot set up a bounty in this discussion thread.
You can start a new discussion thread in this forum.
You cannot reply in this discussion thread.
You cannot start on a poll in this forum.
You cannot upload attachments in this forum.
You can download attachments in this forum.
You cannot up or down-vote on the post in this discussion thread.
Users who participated in discussion: foc_in_gaura, Layzee, dimki