사용자:BANIP/낙서장

<!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%;
           width: calc(100% - 16px);
           height: 80%;
           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){
           let {$title, $content, onModalOpen, accept} = option
           let $modal = $(`

`);

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

           let behaive = {
               open: () => {
                   onModalOpen();
                   $modal.fadeIn();
               },
               close: $modal.fadeout(),
           }
           $modal.find(".btn-accept").on("click",function(){
               resolve();
           })
           $modal.find(".btn-close").on("click",function(){
               reject();
           })
           $(document.body).append($modal);

           return behaive
       }

       const uploadModal = createModal({
           title: '업로드 하시겠습니까?',
           $content: () => {

           },
           onModalOpen: () => {
               
           },
           accept: ($content) => {
               console.log('accept');
           }
       });

       uploadModal.open();
   </script>

</body> </html>