js 特效弹窗（求一JS特效，在submit表单的时候弹出提示）

本文目录

• 求一JS特效，在submit表单的时候弹出提示
• 如何利用JS实现仿微信支付弹窗功能
• js如何实现点击图片弹出窗口并放大这张图片,弹出的窗口有半透明遮罩层效果，弹出的窗口不跳页面
• 用JavaScript做一个模拟计算机病毒效果，当打开一个页面时，会不停地弹出窗口
• jQuery怎么做出弹窗效果
• 问一个js的特效问题,窗口屏幕变黑且不能使用,并弹出可供操作窗口

求一JS特效，在submit表单的时候弹出提示

返回函数的值就可以了。
《script》
function tanchu(b){
return confirm(b);
}
《/script》
调用的代码：
《BUTTON type="submit" value="goumai" onclick="return tanchu(’确定吗？’);" value="点击兑换" /》

如何利用JS实现仿微信支付弹窗功能

这篇文章主要介绍了JS实现仿微信支付弹窗功能,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
先奉上效果图
html代码
《!DOCTYPE html》
《html》
《head》
《title》仿手机微信支付输入密码界面效果《/title》
《meta charset="utf-8" /》
《meta name="viewport" content="initial-scale=1.0, width=device-width, user-scalable=no" /》
《link rel="stylesheet" type="text/css" href="css/rest.css" rel="external nofollow" /》
《/head》
《body》
《!-- 打开弹窗按钮 --》
《button id="myBtn"》去支付《/button》
《!-- 弹窗 --》
《p id="myModal" class="modal"》
《!-- 弹窗内容 --》
《p class="modal-content"》
《p class="paymentArea"》
《p class="paymentArea-Entry"》
《p class="paymentArea-Entry-Head"》
《img src="images/xx_03.jpg" class="close" /》
《img src="images/jftc_03.png" class="useImg"》
《span class="tips-txt"》请输入支付密码《/span》
《/p》
《p class="paymentArea-Entry-Content"》
《p class="pay-name"》测试商品《/p》
《p class="pay-price"》￥88.88《/p》
《/p》
《ul class="paymentArea-Entry-Row"》《/ul》
《/p》
《p class="paymentArea-Keyboard"》
《h4》
《img src="images/jftc_14.jpg" height="10" /》
《/h4》
《ul class="target"》
《li》
《a》1《/a》
《a》2《/a》
《a》3《/a》
《/li》
《li》
《a》4《/a》
《a》5《/a》
《a》6《/a》
《/li》
《li》
《a》7《/a》
《a》8《/a》
《a》9《/a》
《/li》
《li》
《a》清空《/a》
《a》 0 《/a》
《a》删除《/a》
《/li》
《/ul》
《/p》
《/p》
《/p》
《/p》
《/body》
《/html》css
body {
margin: 0;
padding: 0;
font-size: 0.3rem;
font-family: "微软雅黑", arial;
}
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
img {
display: block;
}
#myBtn {
display: block;
width: 80%;
height: auto;
margin: 5rem auto;
padding: 0.2rem;
border-radius: 5px;
border: 0;
outline: none;
font-family: "微软雅黑";
color: #fff;
background-color: #5CB85C;
}
/* 弹窗 */
.modal {
display: none;
/* 默认隐藏 */
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
-webkit-animation-name: fadeIn;
-webkit-animation-duration: 0.4s;
animation-name: fadeIn;
animation-duration: 0.4s
}
/* 弹窗内容 */
.modal-content {
position: fixed;
bottom: 0;
/*background-color: #fefefe;*/
width: 100%;
-webkit-animation-name: slideIn;
-webkit-animation-duration: 0.4s;
animation-name: slideIn;
animation-duration: 0.4s
}
/**
* 支付弹窗样式
* **/
.paymentArea-Entry {
width: 90%;
margin: 0 auto;
padding-bottom: 0.3rem;
background-color: #fff;
}
.paymentArea-Entry-Head {
display: flex;
display: -webkit-flex;
height: 0.8rem;
line-height: 0.8rem;
padding: 0.2rem;
border-bottom: 1px solid #5CB85C;
}
/* 关闭按钮 */
.paymentArea-Entry-Head .close {
width: 0.5rem;
height: 0.5rem;
padding: 0.15rem 0.15rem 0.15rem 0;
}
.paymentArea-Entry-Head .close:hover,
.paymentArea-Entry-Head .close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.paymentArea-Entry-Head .useImg {
width: 0.8rem;
height: 0.8rem;
margin-right: 0.15rem;
}
.paymentArea-Entry-Head .tips-txt {
font-size: 0.4rem;
}
.paymentArea-Entry-Content {
position: relative;
padding: 0.2rem 0;
text-align: center;
}
.paymentArea-Entry-Content:after {
content: "";
position: absolute;
bottom: 0;
left: 0.3rem;
right: 0.3rem;
height: 1px;
background-color: #ddd;
}
.paymentArea-Entry-Content .pay-name {
font-size: 0.3rem;
}
.paymentArea-Entry-Content .pay-price {
font-size: 0.4rem;
font-weight: bold;
}
ul.paymentArea-Entry-Row {
display: flex;
display: -webkit-flex;
justify-content: space-between;
margin: 0.2rem 0.3rem 0 0.3rem;
padding: 0;
border: 1px solid #a2a2a2;
}
ul.paymentArea-Entry-Row li {
position: relative;
flex-grow: 1;
min-width: 1rem;
height: 0.8rem;
line-height: 0.8rem;
text-align: center;
border-right: 1px solid #ddd;
}
ul.paymentArea-Entry-Row li:last-child {
border-right: 0;
}
ul.paymentArea-Entry-Row li img {
position: absolute;
top: 50%;
left: 50%;
width: 0.5rem;
height: 0.5rem;
margin: -0.25rem 0 0 -0.25rem;
}
.paymentArea-Keyboard {
margin-top: 1.2rem;
background-color: #fff;
}
.paymentArea-Keyboard h4 {
height: 0.5rem;
line-height: 0.5rem;
margin: 0;
text-align: center;
}
.paymentArea-Keyboard h4 img {
width: 0.93rem;
height: 0.32rem;
margin: 0 auto;
}
.paymentArea-Keyboard h4:active {
background-color: #e3e3e3;
}
.paymentArea-Keyboard ul {
border-top: 1px solid #ddd;
}
.paymentArea-Keyboard li {
display: flex;
display: -webkit-flex;
justify-content: space-between;
border-bottom: 1px solid #ddd;
}
.paymentArea-Keyboard li a {
flex-grow: 1;
display: block;
min-width: 1rem;
line-height: 1rem;
border-right: 1px solid #ddd;
font-size: 0.3rem;
text-align: center;
text-decoration: none;
color: #000;
}
.paymentArea-Keyboard li:last-child,
.paymentArea-Keyboard li a:last-child {
border: 0;
}
.paymentArea-Keyboard li a:active {
outline: none;
background-color: #ddd;
}
/* 添加动画 */
@-webkit-keyframes slideIn {
from {
bottom: -300px;
opacity: 0
}
to {
bottom: 0;
opacity: 1
}
}
@keyframes slideIn {
from {
bottom: -300px;
opacity: 0
}
to {
bottom: 0;
opacity: 1
}
}
@-webkit-keyframes fadeIn {
from {
opacity: 0
}
to {
opacity: 1
}
}
@keyframes fadeIn {
from {
opacity: 0
}
to {
opacity: 1
}
}js
//定义根目录字体大小，通过rem实现适配
document.addEventListener("DOMContentLoaded", function() {
var html = document.documentElement;
var windowWidth = html.clientWidth;
//console.log(windowWidth)
html.style.fontSize = windowWidth / 7.5 + "px";
}, false);
// 获取弹窗
var modal = document.getElementById(’myModal’);
// 打开弹窗的按钮对象
var btn = document.getElementById("myBtn");
// 获取 《span》 元素，用于关闭弹窗 that closes the modal
var span = document.getElementsByClassName("close");
/*创建密码输入框*/
var entryArea = document.querySelector(".paymentArea-Entry-Row");
for(var i = 0; i 《 6; i++) {
var li = document.createElement("li");
entryArea.appendChild(li);
}
/*键盘操作*/
var doms = document.querySelectorAll(’ul li a’);
var entryLis = document.querySelectorAll(".paymentArea-Entry-Row li");
var pwds = ""; //存储密码
var count = 0; //记录点击次数
for(var i = 0; i 《 doms.length; i++) {
! function(dom, index) {
dom.addEventListener(’click’, function() {
var txt = this.innerHTML;
switch(txt) {
case "清空":
if(count != 0) {
for(var i = 0; i 《 entryLis.length; i++) {
entryLis.innerHTML = "";
}
pwds = "";
count = 0;
console.log(pwds)
console.log(count)
}
break;
case "删除":
if(count != 0) {
console.log(pwds)
entryLis.innerHTML = "";
pwds = pwds.substring(0, pwds.length - 1);
count--;
console.log(pwds)
console.log(count)
}
break;
default:
/*通过判断点击次数 向输入框填充内容*/
if(count 《 6) {
/*创建一个图片对象 插入到方框中*/
var img = new Image();
img.src = "images/dd_03.jpg";
entryLis.appendChild(img);
/*为存储密码的对象赋值*/
if(pwds == "") {
pwds = txt;
} else {
pwds += txt;
}
count++;
if(pwds.length == 6) {
***隐藏网址***
}
} else {
return;
alert("超出限制")
}
}
});
}(doms, i);
}
// 点击按钮打开弹窗
btn.onclick = function() {
modal.style.display = "block";
}
// 点击 《span》 (x), 关闭弹窗
span.onclick = function() {
modal.style.display = "none";
if(count != 0) {
for(var i = 0; i 《 entryLis.length; i++) {
entryLis.innerHTML = "";
}
pwds = "";

js如何实现点击图片弹出窗口并放大这张图片,弹出的窗口有半透明遮罩层效果，弹出的窗口不跳页面

通过JS代码  document.getElementById(’divID’).style.etElementById(’divID’).style.display = ’none’。函数可以实现。

1、遮罩层：《div id="back"》《/div》 ，即作为背景层，覆盖整个页面。弹出层：《div id="form"》《/div》，即背景层上的一层，此层可根据#form{top: 10%; left: 10%;width: 20%;height: 30%;}，调整弹出层的弹出位置。

2、弹出层和遮罩层全部为div标签，可以利用display来控制显示和隐藏的属性，在js中，显示：   document.getElementById(’divID’).style.display = document.getElementById(’divID’).style.display = ’none’。

3、显示遮罩层和弹出层，即可用图中popDiv（）函数表示： 其中，showId 表示弹出层的divId, backId 表示遮罩层的divId；函数第去、2行显示弹出层和遮罩，3、4、5行设置遮罩层的长度、宽度。

4、关闭弹出层和遮罩层用hideDiv函数（）， 其中：showId 表示弹出层的divId, backId 表示遮罩层的divId；先关闭弹出层，后关闭遮罩层。

5、点击按钮后，弹出，要给按钮加上onclick函数，《button onclick="popDiv(’form’,’back’)"》点我，显示弹出层《/button》。

6、整体代码如下，css 样式可根据个人的喜好自行添加。

用JavaScript做一个模拟计算机病毒效果，当打开一个页面时，会不停地弹出窗口

《!DOCTYPE html》
《html》
  《head》
***隐藏网址***
《title》病毒小程序《/title》
《script》
onload=function(){
var b = document.body;
setInterval(function(){
var div = document.createElement("div");
div.style.position="absolute";
div.style.border="1px solid red";
div.style.backgroundColor="gray";
div.style.left=Math.random()*500 + "px";
div.style.top=Math.random()*500 + "px";
div.style.zIndex=11111111;
div.style.width="100px";
div.style.height="100px";
div.innerHTML = "疯狂的兔子";
b.appendChild(div);
},1000);
}
《/script》
  《/head》
《body》
    
  《/body》
《/html》

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"》《/script》

《style type="text/css"》
*{margin: 0px;padding: 0px;}
#login{height:300px;width: 300px;border: 1px solid #ddd;position: absolute; }
#close{position: absolute;right: 0px;top: 0px;}
《/style》


《script type="text/javascript"》

// JS创建一个p标签，也就是节点元素
// window.onload=function(){
// document.createElement(’p’);
// }

// 使用jQuery创建：$(’《p》’);带尖括号的是创建，不带是选择的意思
$(function(){
// var oDiv=$(’《p》’);
// $(’body’).append(oDiv);

$(’input’).click(function(){
var oLogin=$(’《p id="login"》《p》用户名《input type="text"》《/p》《p》密码《input type="text"》《/p》《p id="close"》X《/p》《/p》’);//此功能就相当于body中注释的代码

$(’body’).append(oLogin);
oLogin.css(’left’,($(window).width()-oLogin.outerWidth())/2);
oLogin.css(’top’,($(window).width()-oLogin.outerHeight())/2);//是弹窗能够出现在浏览器的中间

$("#close").click(function(){
oLogin.remove();
})

// jquery 中$()里window不用加引号
// 添加resize()浏览器窗口大小改变
// scroll():滚动条，以下的作用是当滚动条滚动时候，弹窗的位置也不变化
$(window).on("resize scroll",function(){
oLogin.css(’left’,($(window).width()-oLogin.outerWidth())/2+$(window).scrollLeft());
oLogin.css(’top’,($(window).width()-oLogin.outerHeight())/2+$(window).scrollTop());
})

});

});

《/script》
《/head》
《body》
《input type="button" value="点击"》
《!-- 《p id="login"》
《p》用户名《input type="text"》《/p》
《p》密码《input type="text"》《/p》
《p id="close"》X《/p》
《/p》 --》
《/body》
《/html》
用到的点：
jQuery创建：
$(’《p》’);弹窗的位置：
oLogin.css(’left’,($(window).width()-oLogin.outerWidth())/2);
oLogin.css(’top’,($(window).width()-oLogin.outerHeight())/2);当滚动条滚动时候，弹窗的位置变化：
$(window).on("resize scroll",function(){
oLogin.css(’left’,($(window).width()-oLogin.outerWidth())/2+$(window).scrollLeft());
oLogin.css(’top’,($(window).width()-oLogin.outerHeight())/2+$(window).scrollTop());
})相信看了以上介绍你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
相关阅读：
ajax怎样才能读取本地的json
ES6如何使用Set数据结构操作数组
关于HTTP/2服务器推送

问一个js的特效问题,窗口屏幕变黑且不能使用,并弹出可供操作窗口

很简单的。
《不能使用》：
1.设置可供操作窗口为绝对定位，zIndex为最高
2.设置一个div层，它的大小就是浏览器的大小，也是绝对定位，zIndex比可供操作窗口小，但是比普通的页面要高。
注意：这里IE6有个bug，步骤二设置的div层，是无法遮罩住《select》的，这是IE6的bug，解决的方案就是所谓的垫片技术，slim技术，怎么弄，百度一下你就知道啦。
《窗口屏幕变黑》：
把上面2设置的div层，设置其css，IE下可以使用IE的css中的滤镜，firefox也有类似的用法，注意两者是不一样的。
也可以设置背景图片，但是IE6是不支持png格式的，无法达到那种模糊透明的效果。