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

리버티게임, 모두가 만들어가는 자유로운 게임
(임시)
편집 요약 없음
 
37번째 줄: 37번째 줄:
             top: 50%;
             top: 50%;
             left: 50%;
             left: 50%;
             width: calc(100% - 16px);
             max-height: 80%;
             height: 80%;
             min-width: 250px;
             max-width: 800px;
             max-width: 800px;
             background-color: white;
             background-color: white;
93번째 줄: 93번째 줄:
         }
         }
     </style>
     </style>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
     <script>
     <script>
         const createModal = function(option){
         const createModal = function(option){
             let {$title, $content, onModalOpen, accept} = option
 
             let $modal = $(`
             var resolve = function(){}
            var reject = function(){}
           
            var content = option.content || "동의하시겠습니까?"
            var header = option.header || "모달창"
            var onModalOpen = option.onModalOpen || function(){}
 
             var $modal = $(`
             <div class="modal-primary-wrapper">
             <div class="modal-primary-wrapper">
        <div class="modal modal-primary">
        <div class="modal modal-primary">
110번째 줄: 117번째 줄:
        </div>
        </div>
        </div>`);
        </div>`);
             $modal.find(".modal > .content").html($content);
              
            $modal.find(".modal > .header > .title").html($header);
             var behaive = {
 
                 open: function(){
             let behaive = {
                     onModalOpen($modal);
                 open: () => {
                     onModalOpen();
                     $modal.fadeIn();
                     $modal.fadeIn();
                    return new Promise(function(thisResolve,thisReject){
                        resolve = thisResolve;
                        reject = thisReject;
                    })
                 },
                 },
                 close: $modal.fadeout(),
                 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(){
             $modal.find(".btn-accept").on("click",function(){
                 resolve();
                 resolve();
             })
             })
             $modal.find(".btn-close").on("click",function(){
             $modal.find(".btn-close, .modal-primary-wrapper").on("click",function(){
                 reject();
                 behaive.close();
             })
             })
             $(document.body).append($modal);
             $(document.body).append($modal);


             return behaive
             return behaive.open();
         }
         }


         const uploadModal = createModal({
         createModal({
             title: '업로드 하시겠습니까?',
             header: '업로드 하시겠습니까?',
             $content: () => {
             content: 'test',
 
        })
            },
        .then(function(result){
            onModalOpen: () => {
             console.log(result)
               
        }).catch(function(){})
             },
            accept: ($content) => {
                console.log('accept');
            }
        });




        uploadModal.open();
     </script>
     </script>
</body>
</body>
</html>
</html>

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 src="https://code.jquery.com/jquery-3.7.1.min.js"></script> 

   <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>

원본 주소 "https://libertyga.me/index.php?title=사용자:BANIP/낙서장&oldid=234107"