HTML页⾯实现弹出框输⼊⽀付密码前端代码，样式，js
<link href="cdn.jsdelivr/npm/font-awesome@4.7.0/css/font-awesome.min.css"rel="stylesheet">
<!--    ⽀付密码框-->
<link rel="stylesheet"href="@{//code.jquery/ui/1.12.1/themes/base/jquery-ui.css}">
<style>
#dialog-form input{
display: block;
}
<{
margin-bottom: 12px;
width: 95%;
padding: .4em;
}
fieldset{
padding: 0;
border: 0;
margin-top: 25px;
}
h1{
font-size: 1.2em;
margin: .6em 0;
}jquery弹出div窗口
</style>
<script src="@{code.jquery/jquery-1.12.4.js}"></script>
<script src="@{code.jquery/ui/1.12.1/jquery-ui.js}"></script>
<script>
$(function(){
var dialog, form,
password =$("#password"),
tips =$(".validateTips");
function ordersSubmit(){
var str = password.val();
dialog.dialog("close");
$.ajax({
type:"get",
url:"/cart/toOrdersOne",
data:{
payPwd: str
},
success(data){
if(data ==='密码错误'){
alert("密码输⼊错误");
}else if(data ==='余额不⾜'){
alert("余额不⾜，请联系管理员充值");
}else{
layer.msg(data,{icon:1, anim:1});
setTimeout(function(){
location.href ="/user/status/1";
},1000)
}
},
error(){
alert("ajax配置有错，请检查url与type是否正确");
}
});
}
dialog =$("#dialog-form").dialog({
autoOpen:false,
height:230,
width:350,
modal:true,
buttons:{
"⽀付": ordersSubmit,
"取消":function(){
dialog.dialog("close");
}
},
close:function(){
close:function(){
form[0].reset();
}
});
form = dialog.find("form").on("submit",function(event){
event.preventDefault();
ordersSubmit();
});
$("#create-user").button().on("click",function(){
dialog.dialog("open");
});
});
</script>
定义弹出框div信息
<div tabindex="-1"role="dialog"aria-describedby="dialog-form"aria-labelledby="ui-id-1"
>
<div id="dialog-form"class="ui-dialog-content ui-widget-content"
>
<p class="validateTips">请输⼊⽀付密码：</p>
<form>
<fieldset>
<input type="password"name="password"id="password"class="text ui-widget-content ui-corner-all"> <input type="submit"tabindex="-1" >
</fieldset>
</form>
</div>
</div>
后台部分代码
@ResponseBody
@Transactional
@RequestMapping("toOrdersOne")
public String toOrdersOne(String payPwd, HttpSession session){
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。