사용자:BANIP/낙서장: 두 판 사이의 차이

2023년 9월 7일 (목) 17:43 기준 최신판

<!DOCTYPE html> <html lang="en"> <head>

   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>

</head> <body>

   <style>
       .modal-primary-wrapper {
           --var--header-bg-color: hsl(238 20% 30%);
           position: fixed;
           z-index: 9999;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           background-color: rgba(0, 0, 0, 0.5);
       }
       
       /* .modal-primary-wrapper 하위요소 스크롤바 지정 */
       .modal-primary-wrapper *::-webkit-scrollbar {
           width: 4px;
           height: 4px;
           background-color: #fff;
       }
       
       .modal-primary-wrapper *::-webkit-scrollbar-thumb {
           background-color: var(--var--header-bg-color);
           border-radius: 4px;
       }
       
       .modal-primary-wrapper .modal {
           position: absolute;
           overflow: hidden;
           transform: translate(-50%, -50%);
           top: 50%;
           left: 50%;
           max-height: 80%;
           min-width: 250px;
           max-width: 800px;
           background-color: white;
           box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
           display: grid;
           grid-template-rows: 40px 1fr 40px;
       }
       
       .modal-primary-wrapper .header {
           height: 40px;
           background-color: var(--var--header-bg-color);
           border-bottom: 1px solid #ddd;
           color:#fff;
       }
       
       .modal-primary-wrapper .title {
           float: left;
           padding: 10px;
           font-size: 20px;
           font-weight: bold;
       }
       
       .modal-primary-wrapper .content {
           overflow: auto;
           padding:8px;
           background: #edf6fc;
       }
       
       .modal-primary-wrapper .footer {
           border-top: 1px solid #ddd;
           display: flex;
           position: relative;
           align-items: center;
           justify-content: space-around;
       }
       
       .modal-primary-wrapper .footer > .btn {
           width: 100%;
           height: 100%;
           display: flex;
           justify-content: center;
           align-items: center;
           cursor: pointer;
           transition: background 0.2s;
           background: #fff;
       }
       
       .modal-primary-wrapper .footer > .btn:hover {
           background: #eee;
       }
       
       .modal-primary-wrapper .footer > .btn:not(:last-child) {
           border-right: 1px solid #ddd;
       }
   </style>

   <script>
       const createModal = function(option){

           var resolve = function(){}
           var reject = function(){}
           
           var content = option.content || "동의하시겠습니까?"
           var header = option.header || "모달창"
           var onModalOpen = option.onModalOpen || function(){}

           var $modal = $(`

`);

           var behaive = {
               open: function(){
                   onModalOpen($modal);
                   $modal.fadeIn();
                   return new Promise(function(thisResolve,thisReject){
                       resolve = thisResolve;
                       reject = thisReject;
                   })
               },
               close: function(){
                   $modal.fadeOut()
                   reject('취소됨');
               }
           }

           $modal.find(".modal > .content").html(content);
           $modal.find(".modal > .header > .title").html(header);

           $modal.find(".btn-accept").on("click",function(){
               resolve();
           })
           $modal.find(".btn-close, .modal-primary-wrapper").on("click",function(){
               behaive.close();
           })
           $(document.body).append($modal);

           return behaive.open();
       }

       createModal({
           header: '업로드 하시겠습니까?',
           content: 'test',
       })
       .then(function(result){
           console.log(result)
       }).catch(function(){})

   </script>

</body> </html>