Question

我正在尝试在提交后创建一个具有javascript进度条的弹出窗体，然后进度条运行到50％并向用户提供错误并引导他们在弹出窗口中联系我们。我遇到了错误，请帮忙。

以下是我的javascript进度条：

＆＃13;

	<style>
#myProgress {
  position: relative;
  width: 100%;
  height: 30px;
  background-color: #ddd;
}

#myBar {
  position: absolute;
  width: 0%;
  height: 100%;
  background-color: #4CAF50;
}

#label {
  text-align: center;
  line-height: 30px;
  color: white;
}
</style>
<body>

<h1>JavaScript Progress Bar</h1>

<div id="myProgress">
  <div id="myBar">
    <div id="label">0%</div>
  </div>
</div>

<br>
<button onclick="move()">Click Me</button>

<script>
function move() {
  var elem = document.getElementById("myBar");
  var width = 0;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 50) {
      clearInterval(id);
    } else {
      width++;
      elem.style.width = width + '%';
      document.getElementById("label").innerHTML = width * 1  + '%';
    }
  }
}
</script>

＆＃13;

这是我的html表单填充的弹出代码：

＆＃13;

<!-- body starts here -->
 <body id ="bdy" style="overflow:hidden;">
 
 <div id="abc">
 
	 <!-- Popup div starts here -->
 <div id="popupContact"> 

	<!-- contact us form -->
		<form action="#" method="post" id="form" >
			<img src="images/3.png" id="close" onclick ="div_hide()" />
			<h2>Transfer Details</h2><hr/>
			
			
			<fieldset>
    <legend>Reciever's information:</legend>
    
	Account Number:<br>
    <input type="text" name="Account number" onkeyup="checkInput(this)" value="" id="name" placeholder="Account Number"><br>
    
	Account Name:<br>
    <input type="text" name="Account Name" value="" id="name" placeholder="Account Name"><br><br>
	
	Routing (ABA):<br>
<input type="text" name="Routing (ABA)" onkeyup="checkInput(this)" id="name" value="" placeholder="Routing (ABA)"><br><br>
	
	Bank Name:<br>
<input type="text" name="Bank Name" id="name"  value="" placeholder="Bank Name"><br><br>
	
	Account Type:<br>
	<select name="Account Type" placeholder="Account Type">
                            <option>Fix Deposit</option>
                            <option>Checking</option>
                            <option>Savings</option>
                            <option>Current</option>
                        </select>
    
  </fieldset>
  
	<a id="submit" href="javascript: check_empty()" onclick="move()">Send</a>
			
			<p><span>Note :</span> All Form Is Required.</p>
			
  
		</form>
 </div> 
 <!-- Popup div ends here -->
 </div>
 <!-- display popup button -->
    <CENTER><h1>Transfer To Another Account:</h1>
	        <button id = "popup" onclick ="div_show()">Make Payment</button></CENTER>
<!-- Right side div -->
	<img id="fugo" src="images/formget.jpg" alt="Online Form Builder"/></a>

＆＃13;

我没有错误弹出代码。

Answer 1

首先需要做的是默认隐藏表单：

#popupContact {
  display: none;
}

然后，您需要在表单达到50％时显示div，方法是更改display #popupContact条件中if的{{1}}：

frame()

这将使百分比栏达到50％时表单自动变为可见。我创造了一个展示Taylor series的小提琴。在示例中，我还添加了一条基本错误消息。

如何显示表格取决于您 - 如果您想将其显示为弹出窗口，我建议您查看here或Bootstrap modals。

希望这有帮助！

提交后具有JS进度条的弹出窗体，然后进度条运行到50％并提供用户错误并引用它们与我们联系

1 个答案: