jquery實現簡單的彈窗效果
阿新 • • 發佈:2021-10-18
本文例項為大家分享了實現簡單彈窗效果的具體程式碼,供大家參考,具體內容如下
效果實現圖
程式碼
h1,p,h2{ margin: 0; padding: 0; } .www.cppcns.commodal_info{ display: flex; visibility: hidden; flex-direction: column; align-items: flex-start; justify-content: flex-start; width: 200px; height: auto; position: fixed; margin:auto; background-color: #FFFFFF; border-radius: 3px; top: 45%; left: 50%; box-sizing: border-box; z-index: 111; -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .modal_info .head_blue{ padding: 5px 10px; height: auto; box-sizing: border-box; background: #2262C6; font-style: normal; font-weight: bold; font-size: 18px; line-height: 18px; color: #FFFFFF; width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: space-between !important; text-transform:capitalize; } .modal_info .head_blue h1{ font-size: 18px; color: white; } .modal_info .body_main{ display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 10px 10px; background-color: #FFFFFF; flex: 1; width: 100%; box-sizing: border-box; } .modal_info .bottom_button{ display: flex; flex-direction: row; align-items: center; justify-content: space-around; width: 100%; padding: 10px; box-sizing: border-box; } .modal_info .bottom_button div{ display: flex; flex-direction: row; align-items: center; justify-content: center; padding: 5px; box-sizing: border-box; } .modal_info .bottom_button .yes{ background-color: #2262C6; color: #FFFFFF; } .modal_info .bottom_button .no{ background-color: #FFFFFF; color: #505050; border: 1px solid #505050; } .md-show{ visibility:visible !important; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacityhttp://www.cppcns.com: 1; }
html程式碼加上jquery程式碼,注意裡面的引用的css和
jquery可以下載任意一個版本放入
<!DOCTYPE html> <html> <head> <title>彈窗</title> <link rel="stylesheet" href="./modal.css" /> </head> <body style="background-color: black;"> <div class="button_click" style="background-color:#FFFFFF;width: 100px;height: 100px;">點選這個</div> </body> <script type="text/" src="jquery-3.5.1.min.js"></script> <script> function modal_confirm(option){ var {title,question,content,confirm,cancel,style,btn} = option; uEKnVEk var yes_confirm,no_cancel; btn.forEach(item=>{ if(item.yes){ yes_confirm = item.yes; } else if(item.cancel){ no_cancel = item.cancel; } } ) if($('.modal_info')){ $('.modal_info').remove(); } $('body').append(`<div class="modal_info" style="${style?style:''}"></div>`); var modal = $('.modal_info'); modal.append(`<div class="head_blue"><h1>${title?title:'title'}</h1></div>`); modal.append(`<div class="body_main"><h1>${question?question:'question'}</h1><p>${content?content:'content'}</p></div>`); http://www.cppcns.commodal.append(`<div class="bottom_button"><div class="yes">${confirm?confirm:'confirm'}</div><div class="no">${cancel?cancel:'cancel'}</div></div>`); setTimeout(() => { $('.modal_info').addClass('md-show'); },10); $('.yes,.no').on('click',function(){ if($(this).attr('class')==='yes') { yes_confirm(); } else{ no_cancel(); } $('.modal_info').removeClass('md-show'); setTimeout(()=>{ this.parentNode.parentNode.remove(); },300); }) } $('.button_click').on('click',function(){ modal_confirm({ title:'標題',question:'',content:'content',confirm:'',cancel:'cancel',style: 'width:200px;height:200px',btn:[{ yes:function(){ console.log('這個是confirm'); } },{ cancel:function(){ console.log('這個是cancel'); } } ] }); }) </script> </html>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。