jquery实现简单的弹窗效果 jquery实现简单的弹窗效果

【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可以下载任意一个版本放入