jquery实现简单的弹窗效果_JavaScript

JavaScript

JavaScript ASP.NET PHP编程正则表达式 AJAX相关 ASP编程 JSP编程编程10000问 CSS/HTML Flex 脚本加解密 web2.0 XML/RSS 网页编辑器相关技巧安全相关网页播放器 Dart Vue.js

上一篇: JavaScript实现移动端签字功能下一篇:JavaScript 反射学习技巧

jquery实现简单的弹窗效果

发布时间：2022-04-16 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了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实现简单的弹窗效果全部内容，希望文章能够帮你解决jquery实现简单的弹窗效果所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：弹窗"

上一篇: JavaScript实现移动端签字功能下一篇:JavaScript 反射学习技巧

猜你在找的JavaScript相关文章

html font标签如何设置字体大小？html font标签属性用法介绍 2022-05-16
vue3+TypeScript+vue-router的使用方法 2022-04-16
vue3获取当前路由地址 2022-04-16
如何利用React实现图片识别App 2022-04-16
JavaScript展开运算符和剩余运算符的区别详解 2022-04-16
微信小程序中使用vant框架的具体步骤 2022-04-16
Vue elementUI表单嵌套表格并对每行进行校验详解 2022-04-16
如何利用Typescript封装本地存储 2022-04-16
微信小程序中wxs文件的一些妙用分享 2022-04-16
JavaScript的Set数据结构详解 2022-04-16

全站导航更多

最新JavaScript教程

热门JavaScript教程