jquery实现简单的弹窗效果
本文实例为大家分享了jquery实现简单弹窗效果的具体代码，供大家参考，具体内容如下
效果实现图
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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
运用JQuery的toggle实现网页加载完成自动弹窗
toggle()事件 它主要切换元素的可见状态. 1.toggle(switch) ①switch是一个可选值,如果不填则原来元素是显示则将其隐藏,如果是隐藏则显示. HTML 代码: 复制代码 代码如下: <p>Hello</p><p style="display: none">Hello Again</p> jQuery 代码: 复制代码 代码如下: $("p").toggle() 结果: 复制代码 代码如下: &
-
jQuery实现的两种简单弹窗效果示例
本文实例讲述了jQuery实现的两种简单弹窗效果.分享给大家供大家参考,具体如下: 这里利用jquery实现两种弹窗效果: 1. 淡入弹窗效果: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net jQuery弹窗</title> <style> *{padding: 0;margin: 0;} .box{wi
-
简单实现jQuery弹窗效果
本文实例为大家分享了jQuery弹窗效果展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>弹窗</title> <script type="text/javascript" src="../jquery-3.2.1.min.js&
-
jQuery实现弹窗居中效果类似alert()
效果图如下所示: 废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>弹出确认框始终位于窗口的中间位置的测试</title> <style type="text/cs
-
jquery制作弹窗提示窗口代码分享
复制代码 代码如下: <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script><!--[if IE 6]><script type="text/javascript" src="js/iepngfix_tilebg.js"></script><![endif]--><s
-
Jquery实现自定义弹窗示例
在项目开发中,如果我们使用javascript自带的提示对话框,感觉不怎么美观,所以我们通常都是自己定义一些对话框,这里我实现点击按钮就弹窗一个登录的窗口,点击该窗口并可以实现拖拽功能,太多文字的东西说不清楚,直接用代码说话. 这里我将HTML.CSS.Jquery代码分别贴出来 HTML部分: 复制代码 代码如下: <button id="show" class="alter">弹窗</button> <!-- 弹窗部分-->
-
小巧强大的jquery layer弹窗弹层插件
先去官网下载最新的js http://sentsin.com/jquery/layer/ ①引用jquery ②引用layer.min.js 触发弹层的事件可自由绑定,如: $('#id').on('click', function(){ layer.msg('test'); }); 下面主要贴出上述例子的调用代码: [信息框]: layer.alert('白菜级别前端攻城师贤心', 8); //风格一 layer.msg('前端攻城师贤心'); //风格二 //当然,远远不止这两种风格. [
-
jquery实现弹窗功能（窗口居中显示）
效果图: 代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>弹出确认框始终位于窗口的中间位置的测试</title> <style type="text/css"> .mask { posit
-
jquery实现弹窗（系统提示框）效果
本文实例为大家分享了jquery实现系统提示框的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="js/jquery-1.11.1.js"></script> <title>弹窗效果</title> <styl
-
jquery ui dialog实现弹窗特效的思路及代码
今天我们用jquery ui dialog来做一个弹窗特效.我们先看下效果截图: 我们可以看到,点击的时候,弹窗出现,而且这个弹窗是居中的,还是可以拖动的...实现这一切,只要以下代码: 我们可以看到,我对pop这个div,实现的方式是让它不要autoopen,点击的时候,我只要一句dialog,open就搞定了,借助于jquery ui,我们做弹窗就是这么简单...当然了,大家可以看到,我还有一个插入数据的功能,这个功能,我采用了jquery 的appendto: 我先通过变量获取值,接着建了