Modal Windows

Jill Farley

Is there an easy way to implement modal windows in BBNC without a custom part?

Byron Hudson

Yes - please - custom part or otherwise.

Karen Badham

Hey Jill,



I'm copying and pasting what I put in Byron's thread about this.



Any time you want custom code that would go in an unformatted text part. The rest of the question isn't unique to NetCommunity, so you'll want to use google as your main tool for research. As far as NetCommunity is concerned just use an unformatted text part to put the code on a page. This is your best bet on having the code work.



Thanks!


Karen

Peter Gulka 2

I've been messing around with this as well. My implementation was based on this code sample:



https://sheriframadan.com/2012/07/jav...



I used 2 Unformatted text parts - one in the Head and one in the Body. It kind of worked, though there are conflicts with our template when it tries to dim the bakground.







Nonetheless for 5 minutes worth of work it shows promise

Chris Martin

NetCommunity loads the jQuery UI library so you can use its dialog() function to show a simple modal popup if you like. As an example, you can add the following code to an Unformatted Text part and set it to insert the contents at the part location on the page (advanced options at the bottom of the part):

<br /><br/><script type="text&#47;javascript">
<br /><br/>function showModal() {
<br /><br/>$( "#dialog" )&#46;dialog({modal: true});
<br /><br/>$('&#46;ui-widget-overlay')&#46;css({'background-color':'#333333','opacity':'0&#46;7'});
<br /><br/>};
<br /><br /><br/><&#47;script>
<br /><br /><br/><div id="dialog" title="Basic dialog" style="display:none;">
<br /><br/><p>This is the default dialog which is useful for displaying information&#46; The dialog window can be moved, resized and closed with the 'x' icon&#46;<&#47;p>
<br /><br/><&#47;div>
<br /><br /><br/><a href="#" onclick="showModal()">Click to show modal window<&#47;a>
<br /><br/>

Peter Gulka 2

Well.... how about that...



buggy again with my template, but in a different way. There is hope!

Chris Martin

Sorry Peter...try changing the applied CSS in the script from this:

$('.ui-widget-overlay').css({'background-color':'#333333','opacity':'0.7'});
<br /><br/>};

to this

$('.ui-widget-overlay').css({'background':'#333333','opacity':'0.7'});
<br /><br/>};

Peter Gulka 2

DING DING!