jQuery implements simple pop-up window effect
|
This article shares the specific code of jQuery to achieve a simple pop-up window effect for your reference. The specific content is as follows Effect realization diagram
CSS Code
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 code plus jQuery code, pay attention to the referenced CSS and JS
<!DOCTYPE html>
<html>
<head>
<title>Popup</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;">Click this</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:'Title',
question:'',
content:'content',
confirm:'',
cancel:'cancel',
style: 'width:200px;height:200px',
btn:[{
yes:function(){
console.log('This is confirm');
}
},
{
cancel:function(){
console.log('This is cancel');
}
}
]
});
})
</script>
</html>The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: MySQL implementation of lastInfdexOf function example
Recommend
21 MySQL standardization and optimization best practices!
Preface Every good habit is a treasure. This arti...
MySQL implements string concatenation, interception, replacement, and position search operations
MySQL string concatenation, interception, replace...
What should I do if I can't view the source file of a web page?
Q: Whether using Outlook or IE, when you right-cl...
40 CSS/JS style and functional technical processing
1- Styling dropdown select boxes - Modify the dro...
mysql5.6.8 source code installation process
Kernel: [root@opop ~]# cat /etc/centos-release Ce...
Sample code for deploying Spring-boot project with Docker
1. Basic Spring-boot Quick Start 1.1 Quick start ...
Analysis of the Nesting Rules of XHTML Tags
In the XHTML language, we all know that the ul ta...
XHTML tags have a closing tag
<br />Original link: http://www.dudo.org/art...
Detailed explanation of JavaScript private class fields and TypeScript private modifiers
Table of contents JavaScript private class fields...
IE8 uses multi-compatibility mode to display web pages normally
IE8 will have multiple compatibility modes . IE pl...
Example of using UserMap in IMG
usemap is an attribute of the <img> tag, use...
Node connects to MySQL and encapsulates its implementation code for adding, deleting, modifying and checking
Table of contents Node connects to Mysql Install ...
Introduction to the use of several special attribute tags in HTML
The following attributes are not very compatible w...
mysql5.7 installation and configuration tutorial under Centos7.3
This article shares the MySQL 5.7 installation an...
Idea deployment tomcat service implementation process diagram
First configure the project artifacts Configuring...