[Jquery] Jqeury alert - 제이쿼리 alert

Jquery alert 입니다. 아래는 사용 예시 화면입니다.

default 부터 하나씩 보여드리겠습니다.

1. default

2.alert

3.confirm

4.iframe

5.prompt

아래는 HTML 코드이다. 

<a href="javascript:;" id="default">default</a>
 
<br />
<a href="javascript:;" id="alert">alert</a>
 
<br />
<a href="javascript:;" id="confirm">confirm</a>
 
<br />
<a href="javascript:;" id="iframe">iframe</a>
 
<br />
<a href="javascript:;" id="prompt">prompt</a>
 

아래는 클릭 이벤트인 javascript 코드이다.

$('#default').on('click',function(){
  var data = '<div style="padding:20px;">Lorem ipsum dolor sit amet</div>';
  $.dialogbox({
    type:'default',
    title:'Dialog Title',
    content:data,
    closeCallback:function(){
      $.dialogbox.prompt({
        content:'You closed the dialog',
        time:2000 
      });
    }
  });
});
 
$('#alert').on('click',function(){
  $.dialogbox({
  type:'msg',
  title:'Alert Title',
  icon:1,
  content:'Alert Content',
  btn:['Confirm'],
  call:[
    function(){
      $.dialogbox.close(); 
    }
  ]
});
});
 
$('#confirm').on('click',function(){
$.dialogbox({
  type:'msg',
  title:'Confirm Title',
  content:'Are You Sure?',
  closeBtn:true,
  btn:['Confirm','Cancel'],
  call:[
    function(){
      $.dialogbox.close(); 
      alert(3);
    },
    function(){
      $.dialogbox.close(); 
    }
  ]
});
});
 
 
$('#iframe').on('click',function(){
  $.dialogbox({
  type:'iframe',
  title:'jQueryScript',
  content:'Free jQuery Plugins',
  url:'http://www.jqueryscript.net',
  width:900,
  height:650
});
});
 
$('#prompt').on('click',function(){
 $.dialogbox.prompt({
  content:'Success',
  time:2000 
});
});

jquery alert를 사용하기 위해서는 아래의 css,js,image들을 임포트 및 경로에 두고 사용하여야한다.

해당 jquery alert는 제가 이쁘다고 생각한거기 때문에 더이쁜 jquery alert를 사용하시려면 아래의 링크를 통해 확인하시어 사용하시면 됩니다.

https://www.jqueryscript.net/tags.php?/alert/

dialogbox.css

dialogbox.js