Re: [ModalBox Group] More than one pop up on a page?

73 views
Skip to first unread message

Andrey Okonechnikov

unread,
Jul 17, 2012, 5:33:59 AM7/17/12
to moda...@googlegroups.com
You can't (and shouldn't) show several popups at one time since Modalbox is a singleton class. But you can easily update content of Modalbox. See examples section here: http://okonet.ru/projects/modalbox/index.html and API reference here: https://github.com/okonet/modalbox/wiki/Methods-reference


--
Sincerely yours,

Andrey Okonechnikov

@okonetchnikov
http://okonet.ru


On Tuesday, 17. July 2012 at 11:04, Ryan Terps wrote:

>
> Hi there...
>
> I am using your ModalBox...and just wondered how I can have more than one pop up on each page...
>
> I am putting the code in but can only link it to one pop up, I need about 6 different ones for the page, can this be done?
>
> Hope this makes sense.....
>
> Regards
>
> Ryan
>
> --
> You received this message because you are subscribed to the Google Groups "ModalBox" group.
> To view this discussion on the web visit https://groups.google.com/d/msg/modalbox/-/Ux3TPud9QvsJ.
> To post to this group, send email to moda...@googlegroups.com (mailto:moda...@googlegroups.com).
> To unsubscribe from this group, send email to modalbox+u...@googlegroups.com (mailto:modalbox+u...@googlegroups.com).
> For more options, visit this group at http://groups.google.com/group/modalbox?hl=en.



Andrey Okonechnikov

unread,
Jul 17, 2012, 5:41:22 AM7/17/12
to moda...@googlegroups.com
So what is exactly the problem? This is the typical Modalbox use-case… Did you read the documentation / see examples?


--
Sincerely yours,

Andrey Okonechnikov

@okonetchnikov
http://okonet.ru


On Tuesday, 17. July 2012 at 11:39, Ryan Terps wrote:

> No this is not what I mean...I just need 4 different case studies to pop up on a page... for example :
>
> Case Study 1 - Beetle (this would have a pop up) :: Case Study 2 - Makeable Shape (this would have a pop up) .... and so on....
>
> On Tuesday, 17 July 2012 10:33:59 UTC+1, Andrey Okonetchnikov wrote:
> > You can't (and shouldn't) show several popups at one time since Modalbox is a singleton class. But you can easily update content of Modalbox. See examples section here: http://okonet.ru/projects/modalbox/index.html and API reference here: https://github.com/okonet/modalbox/wiki/Methods-reference
> >
> >
> > --
> > Sincerely yours,
> >
> > Andrey Okonechnikov
> >
> > @okonetchnikov
> > http://okonet.ru
> >
> >
> > On Tuesday, 17. July 2012 at 11:04, Ryan Terps wrote:
> >
> > >
> > > Hi there...
> > >
> > > I am using your ModalBox...and just wondered how I can have more than one pop up on each page...
> > >
> > > I am putting the code in but can only link it to one pop up, I need about 6 different ones for the page, can this be done?
> > >
> > > Hope this makes sense.....
> > >
> > > Regards
> > >
> > > Ryan
> > >
> > > --
> > > You received this message because you are subscribed to the Google Groups "ModalBox" group.
> > > To view this discussion on the web visit https://groups.google.com/d/msg/modalbox/-/Ux3TPud9QvsJ.
> > > To post to this group, send email to moda...@googlegroups.com (mailto:moda...@googlegroups.com) (mailto:moda...@googlegroups.com).
> > > To unsubscribe from this group, send email to modalbox+u...@googlegroups.com (mailto:modalbox%2Bunsu...@googlegroups.com) (mailto:modalbox+u...@googlegroups.com (mailto:modalbox%2Bunsu...@googlegroups.com)).
> > > For more options, visit this group at http://groups.google.com/group/modalbox?hl=en.
> >
>
> --
> You received this message because you are subscribed to the Google Groups "ModalBox" group.
> To view this discussion on the web visit https://groups.google.com/d/msg/modalbox/-/UUg6HufsAIUJ.
Message has been deleted

Ryan Terps

unread,
Jul 17, 2012, 5:45:30 AM7/17/12
to moda...@googlegroups.com
Well I downloaded the code...but when I am putting in multiple case studies, only the first one shows up, and the others dont....

Ryan Terps

unread,
Jul 17, 2012, 5:46:38 AM7/17/12
to moda...@googlegroups.com

Ryan Terps

unread,
Jul 17, 2012, 5:49:15 AM7/17/12
to moda...@googlegroups.com


On Tuesday, 17 July 2012 10:45:30 UTC+1, Ryan Terps wrote:

Ryan Terps

unread,
Jul 17, 2012, 5:49:49 AM7/17/12
to moda...@googlegroups.com

Andrey Okonechnikov

unread,
Jul 17, 2012, 5:50:38 AM7/17/12
to moda...@googlegroups.com
What does JS console says?


--
Sincerely yours,

Andrey Okonechnikov

@okonetchnikov
http://okonet.ru


> --
> You received this message because you are subscribed to the Google Groups "ModalBox" group.
> To view this discussion on the web visit https://groups.google.com/d/msg/modalbox/-/rnBreHCJmyMJ.

Ryan Terps

unread,
Jul 17, 2012, 5:56:12 AM7/17/12
to moda...@googlegroups.com
I am not sure what you mean? Here is the start of my code, can you see what I am doing wrong here...

"
<div style="width:253px; height:275px; float:right; margin-right:10px; margin-top:10px">
    <div id='content'>
        <div id='osx-modal'>
            <a href='#' class='osx'><img src="images/caseStudies/liverCase1.jpg" alt="Unmakeable Shape"></a>
        </div>
   
        <!-- modal content -->
        <div id="osx-modal-content">
            <div id="osx-modal-title">Liver Better Life Campaign</div>
            <div class="close"><a href="#" class="simplemodal-close">x</a></div>
            <div id="osx-modal-data">
            <img src="images/caseStudies/liver.jpg" alt="liver">
                <p style=" text-decoration:none; color:#000000">
                Raising awareness is an intrinsic part of public health, discovering new and unique methods to help educate on health issues are vital to an effective campaign. Health organisations and charities have found this “damaged” liver to be a useful tool to demonstrate the dangers and effects of alcohol misuse. This squeezy liver has a smooth ‘healthy’ side which is printed with your strong message, the other side appears rough and discoloured to show the ‘unhealthy’ effects. Other health related campaigns where stress products have been used include lung & heart disease, breast & prostate cancer, drugs and healthy living... call us for more ideas on how to use stressballs as part of your campaign.
                </p>
                <p><button class="simplemodal-close">Close</button> <span>(or press ESC or click the overlay)</span></p>
            </div>
        </div>
    </div></div><!-- Load JavaScript files -->
<script type='text/javascript' src='caseStud/js/jquery.js'></script>
<script type='text/javascript' src='caseStud/js/jquery.simplemodal.js'></script>
<script type='text/javascript' src='caseStud/js/osx.js'></script>
   

   
   
   
   
   
    <div style="width:253px; height:275px; float:right; margin-right:10px; margin-top:10px">
    <div id='content'>
        <div id='osx-modal'>
            <a href='#' class='osx'><img src="images/caseStudies/unmakeCase1.jpg" alt="Unmakeable Shape"></a>
        </div>
   
        <!-- modal content -->
        <div id="osx-modal-content">
            <div id="osx-modal-title">An unmakeable shape makeable!</div>
            <div class="close"><a href="#" class="simplemodal-close">x</a></div>
            <div id="osx-modal-data">
            <img src="images/caseStudies/unmakeShape.jpg" alt="liver">
                <p style=" text-decoration:none; color:#000000">
                Trying to explain what your business does so as not to lose the attention of your audience is a tricky skill. Trying to do this AND explain the benefits of your product, especially if new to the market is even trickier. That was the task for this company who had launched a highly intelligent submersible vehicle for use in the offshore oil & gas industry. An ROV (remotely operated vehicle) is often an aluminium cage with a buoyancy system attached to the top, inside the cage is all its necessary hydraulics, sensors, cables etc. To make a stress shape as an exact replica of this would not have been possible, but our full colour transfer printing and spray painting service made a very complex shape now do-able with great results. Being able to print fine detail within a tight registration was crucial to making this machine look more realistic. This hand held tactile product could now be used as a talking point to explain their story succinctly when face to face with customers.
                </p>
                <p><button class="simplemodal-close">Close</button> <span>(or press ESC or click the overlay)</span></p>
            </div>
        </div>
    </div></div>
   
    <!-- Load JavaScript files -->
<script type='text/javascript' src='caseStud/js/jquery.js'></script>
<script type='text/javascript' src='caseStud/js/jquery.simplemodal.js'></script>
<script type='text/javascript' src='caseStud/js/osx.js'></script>

Ryan Terps

unread,
Jul 18, 2012, 4:31:40 AM7/18/12
to moda...@googlegroups.com
Pls take a look at the attached jpeg, u can get a better idea what i am trying to do from that
screenshot.jpg

Justinas Urbanavicius

unread,
Jul 19, 2012, 1:39:43 AM7/19/12
to moda...@googlegroups.com
look at the demo page and read the documentation, it's all working and explained there. Be sure to use unique id's for each html element that holds modalbox

--
You received this message because you are subscribed to the Google Groups "ModalBox" group.
To view this discussion on the web visit https://groups.google.com/d/msg/modalbox/-/55pGrY9_gHMJ.
To post to this group, send email to moda...@googlegroups.com.
To unsubscribe from this group, send email to modalbox+u...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/modalbox?hl=en.



--
Justinas

Reply all
Reply to author
Forward
0 new messages