SBUx

<sbux-modal></sbux-modal>

<body-html></body-html>

<footer-html></footer-html>

<script>

  function btnSave_click(){

       SBUxG.jQuery("#smallModal").modal('close');

  }                                                

</script>

<sbux-select id="idxSelect_modal" name="selModal" uitype="single"

                  auto-unselected-text="true"  style="width:150px;">

     <option-item value="red">빨강</option-item>

     <option-item value="green">초록</option-item>

     <option-item value="yellow">노랑</option-item>

</sbux-select>

<sbux-button id="idxBtn_modal" name="btn_modal" uitype="modal"

                   text="호출"

                   value="버튼 value"

                   button-color="blue"

                   target-id="smallModal" >

</sbux-button>

<sbux-modal id="smallModal" name="modal_small" uitype="small"

                   is-fade="true"

                   header-title="빨강 일때 나타나는 Modal"

                   header-close-glyphs="glyphicon-off"

                   footer-button-placement = "center"

                   footer-is-close-button = "true"

                   footer-close-text = "닫기">

 <body-html>

  <p>우측상단의 닫기 아이콘 및<br/> 아래 Footer 영역의 버튼 위치,<br/>닫기 버튼의 명칭외에 html 을 입력하여<br/> 버튼의 이벤트를 줄 수 있습니다.<br/><br/><br/> Save 버튼을 클릭하시면<br/> Modal 화면이 닫아지면서 submit click 을 하도록 되어 있습니다.

  </p>

</body-html>

<footer-html>

  <button type="button" class="btn btn-primary"

              onclick="btnSave_click()">Save</button>

</footer-html>

</sbux-modal>

<sbux-modal id="'middleModal'" name="modal_middle" uitype="middle"

               is-fade="true"

               header-title="초록 일때 나타나는 Modal"

               header-close-text="&times;"

               header-close-glyphs="glyphicon-off"

               footer-button-placement = "center"

               footer-is-close-button = "true"

               footer-close-text = "닫기">

       <body-html>

       <p>우측상단의 닫기 아이콘 및<br/> 아래 Footer 영역의 버튼 위치,<br/>닫기 버튼의 명칭외에 html 을 입력하여<br/> 버튼의 이벤트를 줄 수 있습니다.<br/>

       </p>

        </body-html>

        <footer-html>

              <button type="button" class="btn btn-primary" >확인</button>

          </footer-html>

</sbux-modal>

<sbux-modal id="'largeModal'" name="modal_large" uitype="large"

                   is-fade="true"

                   header-title="초록 일때 나타나는 Modal 입니다."

                   header-close-text="닫기"

body-html="<p>소프트보울이 엔터프라이즈 통합 사용자 인터페이스(UI) 플랫폼 시장 공략에 본격적인 시동을 걸었다. 창업 3년차인 소프트보울은 그동안 비 액티브X 기반 UI 그리드 사업에 주력해왔지만 올해를 기점으로 통합 UI 플랫폼으로 영토를 확장했다. 그리드란 웹화면에서 엑셀과 같은 격자를 만들 수 있게 해주는 도구다. UI플랫폼의 핵심 기술로 꼽힌다.소프트보울은 UI 플랫폼 시장에 출사표를 던지면서 표준을 슬로건으로 던졌다. </p>"

                  footer-button-placement = "right"

                  footer-is-close-button = "true"

footer-html='<button type="button" class="btn btn-primary">Save</button>' >

</sbux-modal>

<sbux-button id="btnShowModal" name="showModalNm" uitype="modal"

                text="모달창 버튼"

                button-size="big"

                button-color="default"

                target-id="idxModal">

</sbux-button>        

<script>

  // 그리드 인 경우 modal open 시 rebuild() 를 합니다.

  function fnModalAfterOpen(){

       datagrid1.rebuild();

  }

</script>  

<sbux-modal id="idxModal" name="modalNm" uitype="large"

                  is-fade="true"

                  header-title="모달창의 Title 부문입니다"

                  header-close-text="닫기"

                  callback-after-open="fnModalAfterOpen"

                  footer-button-placement = "right"

                  footer-is-close-button = "true"

                  body-html-id="modalBody"

                  footer-html-id="modalFooter">

</sbux-modal>

<div id="modalBody">

   <sbux-select id="idxSelect_modal" name="select_modal" uitype="single"

                  auto-unselected-text="true"  style="width:150px;">

     <option-item value="hot">따뜻한 색상</option-item>

     <option-item value="cold">차가운 색상</option-item>

  </sbux-select>

  <script>

   var color = [

                    {

                     "C_CHECK"     : "Y",

                     "COLOR_COD" :        "A001",

                     "COLOR_ENM" :        "red",

                     "COLOR_KNM" :        "빨강"

                    },

                    {

                     "C_CHECK"     : "Y",

                     "COLOR_COD" :        "B001",

                     "COLOR_ENM" :        "blue",

                     "COLOR_KNM" :        "파랑"

                    }

                  ];

    </script>                                  

    <sbux-sbgrid id="datagrid1" name="datagrid1" uitype="2.1"

                       strStyle="width:100%; height:380px; font-size:12px; "

                       strJsonRef="color"

                       bIsShowLoadingImage="true"

                       strExplorerbar="sortshowmove"

                       strEmptyRecords="조회된 결과가 없습니다."

                       strRowHeader="30"

                       strDataHeight="30"

                       strExtendLastCol="scroll"

                       strToolTip="true"

                       strSelectFontColor="#333333"

                       strFocusColor="#f8f9fb">

          <columns>

              <column id="col1" text="" width="5%" type="checkbox" ref="C_CHECK" style="text-align:center;" strCheckValue="Y,N" ></column>

              <column id="col2" ref="COLOR_COD" text="칼라코드" type="output" width="25%" style="text-align:center;"></column>

              <column id="col3" ref="COLOR_ENM" text="영문명" type="output" width="35%" style="text-align:center;"></column>

               <column id="col4" ref="COLOR_KNM" text="한글명" type="output" width="35%" style="text-align:center;"></column>

           </columns>

     </sbux-sbgrid>

</div>

<div id="modalFooter">

  <sbux-button id="btnSave" name="saveNm" uitype="normal"

                text="저장"

                button-size="small"

                button-color="default">

  </sbux-button>        

</div>

<div id="sbArea"></div>

<input type="button" value="modal open"    

     onclick="SBUxMethod.openModal('sbScriptNm')">

<script>

   $(document).ready(function(){

       $('#sbArea').sbModal({

           name : 'sbScriptNm',

           uitype : 'small'

       });

   });

</script>