执行javascript函数时显示警报框
下面的代码给出了一个由我创建的自定义对话框(带有html、css和JS代码),单击按钮时会显示该对话框执行javascript函数时显示警报框,javascript,html,forms,popup,onsubmit,Javascript,Html,Forms,Popup,Onsubmit,下面的代码给出了一个由我创建的自定义对话框(带有html、css和JS代码),单击按钮时会显示该对话框 <!DOCTYPE html> <html> <head> <style> /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1
<!DOCTYPE html>
<html>
<head>
<style>
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
.modal-body {padding: 2px 16px;}
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
</style>
</head>
<body>
<h2>Animated Modal with Header and Footer</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>
/*模态(背景)*/
.莫代尔{
显示:无;/*默认情况下隐藏*/
位置:固定;/*保持原位*/
z指数:1;/*位于顶部*/
填充顶部:100px;/*框的位置*/
左:0;
排名:0;
宽度:100%;/*全宽*/
高度:100%;/*全高*/
溢出:自动;/*根据需要启用滚动*/
背景色:rgb(0,0,0);/*回退色*/
背景色:rgba(0,0,0,0.4);/*黑色w/不透明度*/
}
/*模态内容*/
.模态内容{
位置:相对位置;
背景色:#fefe;
保证金:自动;
填充:0;
边框:1px实心#888;
宽度:80%;
盒影:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit动画名称:animatetop;
-webkit动画持续时间:0.4s;
动画名称:animatetop;
动画持续时间:0.4s
}
/*添加动画*/
@-webkit关键帧动画顶点{
从{top:-300px;不透明度:0}
到{顶部:0;不透明度:1}
}
@关键帧动画顶点{
从{top:-300px;不透明度:0}
到{顶部:0;不透明度:1}
}
/*关闭按钮*/
.结束{
颜色:白色;
浮动:对;
字号:28px;
字体大小:粗体;
}
.关闭:悬停,
.结束:聚焦{
颜色:#000;
文字装饰:无;
光标:指针;
}
.模态标题{
填充:2x16px;
背景色:#5cb85c;
颜色:白色;
}
.模态体{填充:2px 16px;}
.模态页脚{
填充:2x16px;
背景色:#5cb85c;
颜色:白色;
}
带有页眉和页脚的动画模态
开放模态
&时代;
模态头
情态体中的一些文本
其他一些文本
模态页脚
//获取模态
var modal=document.getElementById('myModal');
//获取打开模式对话框的按钮
var btn=document.getElementById(“myBtn”);
//获取关闭模态的元素
var span=document.getElementsByClassName(“关闭”)[0];
//当用户单击该按钮时,打开模式对话框
btn.onclick=函数(){
modal.style.display=“块”;
}
//当用户单击(x)时,关闭模式对话框
span.onclick=函数(){
modal.style.display=“无”;
}
//当用户单击模式之外的任何位置时,将其关闭
window.onclick=函数(事件){
如果(event.target==模态){
modal.style.display=“无”;
}
}
我想在提交表单时执行javascript函数中的条件时显示对话框!下面是javascript函数和表单的html代码
<form id=orders name="orders" action="orders_action.php" method="post" enctype="multipart/form-data" onsubmit="return test()">
function test(){
var element = document.getElementById("time").value;
var d = new Date();
var m = d.getMinutes();
var h = d.getHours();
if(h == '0') {h = 24}
var currentTime = h+"."+m;
console.log(currentTime);
// get input time
var time = element.split(":");
var hour = time[0];
if(hour == '00') {hour = 24}
var min = time[1];
var inputTime = hour+"."+min;
console.log(inputTime);
var totalTime = currentTime - inputTime;
console.log(totalTime);
if ((Math.abs(totalTime)) > 2) {
document.getElementById('time').style.background ='white';
}
else {
document.getElementById('time').style.background ='#e35152';
alert("Wrong time");
}
}
功能测试(){
var元素=document.getElementById(“时间”).value;
var d=新日期();
var m=d.getMinutes();
var h=d.getHours();
如果(h='0'){h=24}
var currentTime=h+“+m;
console.log(当前时间);
//获取输入时间
var time=element.split(“:”);
var小时=时间[0];
如果(小时='00'){hour=24}
var min=时间[1];
var输入时间=小时+“+”分钟;
控制台日志(输入时间);
var totalTime=当前时间-输入时间;
console.log(总时间);
如果((数学绝对值(总时间))>2){
document.getElementById('time').style.background='white';
}
否则{
document.getElementById('time').style.background='#e35152';
警报(“错误时间”);
}
}
我想在我创建的对话框中显示“错误的时间消息”,而不是上面JS函数中的警报框!如何实现这一点?而不是警报功能。编写以下代码(纯Js):
modal.style.display=“block”;
modal.querySelector('.modal body').innerHTML=“错误时间””;
modal.style.display = "block";
modal.querySelector('.modal-body').innerHTML="<p>Wrong time</p>";