Merge pull request #48 from mbaas2/jBox_Panel

I'm going to add a comment on the Use 'faIcons' line to explain why that needs to be done.

HTML/_JS/jBox.dyalog

@@ -1,4 +1,4 @@
-:Class jBox : #._JQ._jqWidget
+:Class jBox : #._JQ._jqWidget
 ⍝ Description:: jBox widget
 ⍝
 ⍝ Constructor:: [type [message [content]]]
@@ -12,8 +12,13 @@
 ⍝ Content - the content for the target element
 ⍝ Theme - name of a jBox-Theme (one of 'ModalBorder','NoticeBorder','TooltipBorder' or 'TooltipDark')
 ⍝
+⍝ Shared Methods:
+⍝ {optionsORcolour} Notice [message] - displays a popup-msg.
+⍝ {options} Modal [message] - modal popup
+⍝
 ⍝ Notes::
 ⍝ For more information see https://github.com/StephanWagner/jBox
+⍝ Documentation of options can be found @ http://stephanwagner.me/jBox/options
 ⍝ Type is a public field in the base class
 
     :field public shared readonly DocBase←'http://stephanwagner.me/jBox/documentation'
@@ -55,4 +60,33 @@
       :EndIf
       r←⎕BASE.Render
     ∇
+
+    ∇ r←{ColorOrOpts}Notice txt;jb
+      :Access public shared
+      jb←New _.jBox'Notice'txt
+      jb.ScriptOptions←0 0 0
+      :If 2=⎕NC'ColorOrOpts'
+      :AndIf 0<ColorOrOpts
+          jb.Options.color←ColorOrOpts
+      :ElseIf 9=⎕NC'ColorOrOpts'
+          jb.Options←ColorOrOpts
+      :EndIf
+      r←jb.Render            ⍝ set the JavaScript
+    ∇
+
+
+    ∇ r←{opts}Modal txt;jb
+      :Access public shared
+      jb←New _.jBox'Modal'
+      jb.Content←txt
+      jb.ScriptOptions←0 0 0
+      :If 9=⎕NC'opts'
+          jb.Options←opts
+      :EndIf
+      'onInit'jb.Set'function() { this.open(); }'
+      r←jb.Render
+    ∇
+
+
+
 :EndClass

SampleMiSites/MS3/Examples/JS/jBoxAdvanced.mipage

@@ -6,14 +6,13 @@
 
     ∇ Compose;tab;jTab;dt;columns;ocw
       :Access public
-      Use'FontAwesome'
+      Use'faIcons'
       Add _.Style'.demo'(('background-color' 'lightblue')('border' '1px solid gray'))
 
       Add _.Style'.tooltip'(('background-color' 'lightblue')('border' '1px solid gray'))
       (Add _.jBox).Selector←'.tooltip'
 
 
-
       Add _.h2'jBox Widget - Advanced sample'
 
       Add _.h3'More fun with tooltips!'
@@ -65,15 +64,9 @@
       'cancelButton'dd.Set'Absolutely not!'
      ⍝ NB: the dialog will automatically attach itself to all elements with a data-confirm-Attribute!
 
-      Add _.h3'Notices'
-      '.demo' '#notice'Add _.div'Click somewhere in this div to trigger a notice that will automatically hide after a bit'
-      jb←New _.jBox'Notice' 'Hurray! A notice!'
-      jb.ScriptOptions←0 0 0
-      'position.(x y)'jb.Set 15 65
- ⍝ Now add the Handler...
-      h←Add _.Handler'#notice' 'click'
-      h.CallBack←0                        ⍝ no APL callback, it's all in JavaScript
-      h.JavaScript←jb.Render              ⍝ set the JavaScript
+      Add _.h3'Shared functions to your callbacks'
+      ('.demo' '#notice'Add _.div'Click somewhere in this div to trigger a notice that will automatically hide after a bit').On'click' 'FireNotice'
+      ('.demo'Add _.div'Click here for a modal popup').On'click' 'FireModal'
 
 
       Add _.h3'Images & Gallery'
@@ -117,4 +110,26 @@
 
     ∇
 
+    ∇ R←FireNotice
+      :Access public
+      opts←⎕NS''
+      opts.animation←'slide'
+      opts.theme←'ModalBorder'
+      opts.color←'green'
+      R←Execute opts _.jBox.Notice'Hurray! A notice!'
+      R,←Execute _.jBox.Notice'And here is a simple example w/o any settings'
+      R,←Execute _.jBox.Notice'That demonstrates how nicely these notices stack up...'
+    ∇
+
+    ∇ R←FireModal;opts
+      :Access public
+      opts←⎕NS''
+      opts.title←'Modal message'
+      opts.theme←'ModalBorder'
+      cnt←New _.Icon'fa-thumbs-up'
+      cnt,←,'Meet the '
+      cnt,←'href="http://www.dyalog.com/meet-team-dyalog.htm"' 'target="blank"'Add _.a'Team'
+      opts.content←(New _.span cnt).Render
+      R←Execute opts _.jBox.Modal''
+    ∇
 :EndClass