Double IDs on Page after opening ModalBox

[GoogleCodeExporter]

When I open the modalBox with a directCall.element.
It correctly takes the HTML from that Element and displays it within the 
Modalbox. 
BUT the original HTML/DOMElement remains on the Page. So when I set some JS 
Events to that ID it leads to some confusion. (e.g. double IDs)

The Solution that I build for myself is the following:
Store the outerHTML in an Object and remove the original DOM Node. Right before 
closing the Modalbox riinsert the DOMNode to the Body.

Directly after the line:
if( settings.type && globaloptions.callFunctionBeforeShow() ){
I added:
my_customs.layerHTMLTemp = 
jQuery(globaloptions.directCall["element"]).outerHTML(); //outerHTML is a small 
jQuery Plugin
jQuery(globaloptions.directCall["element"]).remove(); //remove the original 
Element from DOM

And right before removing the Modalbox from DOM in function removeLayer() I 
call:
jQuery("body").append(my_customs.layerHTMLTemp); //reinsert DOM Node to Body 
again

I don't know if this is the most elegant way to do this.
But maybe you could insert that kind of functionality to your brilliant Plugin.

Greetings
Florian

Original issue reported on code.google.com by fwebdev on 18 Sep 2012 at 1:19

Attachments:

• jquery.modalbox-1.4.1.js

[GoogleCodeExporter]

For that you have to use the method directCall.data:

<script type="text/javascript">
/* <![CDATA[ */
    jQuery(document).ready(function(){
        jQuery.fn.modalBox({ 
            directCall: { 
                data : '<div class="testclass"><p>test</p></div>'
            }
        });
    });
/* ]]> */
</script>

Original comment by steffen....@googlemail.com on 18 Sep 2012 at 1:42

• Changed state: Done

[GoogleCodeExporter]

Yes, I saw that. But I don't want to put a lot HTML in my Javascript Files.
There is also a lot of generated stuff within that Layer.

Or is it possible to hand an Object as data, instead of a string?

Original comment by fwebdev on 18 Sep 2012 at 1:44

[GoogleCodeExporter]

Sure. Put your HTML to a string like:

var myHTMLCOntent = '<div class="testclass"><p>test</p></div>';
jQuery.fn.modalBox({ 
            directCall: { 
                data : myHTMLCOntent
            }
        });

Original comment by steffen....@googlemail.com on 18 Sep 2012 at 1:46

[GoogleCodeExporter]

Hm... OK.
But thats not what I need.
I store an Element from the DOM in myContent and I see the Layer.
var myContent = $j("#ps_offerLayerModal").html();

But the original DOM Element still remains on the page.
Your solution is just working if I keep the original Element completly out of 
DOM.

But thats not possible because the HTML is generated and filled with 
Backendinformation. :(

Original comment by fwebdev on 18 Sep 2012 at 1:56

[GoogleCodeExporter]

Use class over ID. Solution:

<script type="text/javascript">
/* <![CDATA[ */
    jQuery(document).ready(function(){
        jQuery.fn.modalBox({ 
            directCall: { 
                data : $(".ps_offerLayerModal").eq(2).html();
            }
        });
    });
/* ]]> */
</script>

Original comment by steffen....@googlemail.com on 18 Sep 2012 at 2:07

[GoogleCodeExporter]

I think I have to use my Solution because I have nearly 100 exisiting Modalbox 
(created for a prototype/scriptaculous World) that I have to migrate over the 
time. 
I don't want to change all the CSS/JS Bindings to switch from IDs to Classes.

But thank you for your quick responses.

Original comment by fwebdev on 18 Sep 2012 at 2:11

[GoogleCodeExporter]

Yes, it exist a lot of solution for modal boxes. The best of all is Lightbox: 
http://en.wikipedia.org/wiki/Lightbox_%28JavaScript%29

But you are going to declare that all solutions can't supply all your 
requirements.

Best Regards,
Steffen

Original comment by steffen....@googlemail.com on 18 Sep 2012 at 2:42

[GoogleCodeExporter]

Noooo :-)
But I like your solution a lot.
Small, good readable source with nice callbacks and a simple way to Theme it :-)

Lightbox brings to much stuff with it.

Original comment by fwebdev on 18 Sep 2012 at 2:47

[GoogleCodeExporter]

Thank you. I think my solution for modal boxes are most usable for professional 
developers. Lightbox or other are whole lot simpler.

Best Regards,
Steffen

Original comment by steffen....@googlemail.com on 18 Sep 2012 at 3:29