jquery實現(xiàn)簡單的彈窗效果
更新時間：2021年10月15日 10:43:30 作者：xin_sleep
這篇文章主要為大家詳細介紹了jquery實現(xiàn)簡單的彈窗效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了jquery實現(xiàn)簡單彈窗效果的具體代碼，供大家參考，具體內(nèi)容如下
效果實現(xiàn)圖
css代碼
h1,p,h2{
margin: 0;
padding: 0;
}
.modal_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);
opacity: 1;
}
html代碼加上jquery代碼，注意里面的引用的css和js
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/javascript" src="jquery-3.5.1.min.js"></script>
<script>
function modal_confirm(option){
var {title,question,content,confirm,cancel,style,btn} = option;
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>`);
modal.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>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了jQuery的text()方法用法,以實例形式詳細分析了jQuery的text()方法的定義、參數(shù)與具體用法,具有一定的參考借鑒價值,需要的朋友可以參考下2014-12-12
牛叉的Jquery——Jquery與DOM對象的互相轉(zhuǎn)換及DOM的三種操作
Jquery對象就是通過jQuery包裝DOM對象后產(chǎn)生的對象，jQuery對象是jQuery獨有的，其可以使用jQuery里的方法，本文給大家介紹Jquery對象就是通過jQuery包裝DOM對象后產(chǎn)生的對象，jQuery對象是jQuery獨有的，其可以使用jQuery里的方法。感興趣的朋友可以參考下2015-10-10
基于jQuery的判斷iPad、iPhone、Android是橫屏還是豎屏的代碼
在ipad、iphone網(wǎng)頁開發(fā)中，我們很可能需要判斷是橫屏或者豎屏。下面就來介紹如何用 jQuery 判斷iPad、iPhone、Android是橫屏還是豎屏的方法2014-05-05
大家一定都玩過擲色子的游戲，今天我給大家分享的是如何使用jQuery來實現(xiàn)擲色子的動畫效果，通過jQuery的animate()自定義動畫函數(shù)并結(jié)合CSS背景圖片切換實現(xiàn)的動畫效果2014-03-03
本篇文章主要介紹了jQuery操作css樣式的相關(guān)知識，具有很好的參考價值。下面跟著小編一起來看下吧2017-05-05
jQuery.cookie.js使用方法及相關(guān)參數(shù)解釋
一個輕量級的cookie 插件，可以讀取、寫入、刪除 cookie。這篇文章主要介紹了jQuery.cookie.js使用方法及相關(guān)參數(shù)解釋,需要的朋友可以參考下2017-03-03
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)淡入淡出效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
JQuery事件委托(適用于給動態(tài)生成的腳本元素添加事件)
jq寫了點擊事件，是通過獲取元素的類名被點擊后執(zhí)行對應(yīng)方法，但是研發(fā)套完模板，他會把所有的結(jié)構(gòu)先清空，導(dǎo)致jq根本找不到那個元素，所以事件就不得執(zhí)行了,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了詳解jquery選擇器的原理的相關(guān)資料,就是jquery原型里面有一個init初始化的方法，將傳入的值進行解析，比如傳入的id還是class還是標簽名，需要的朋友可以參考下
2017-08-08