自定义弹出框（改进后的windows alert）

最新推荐文章于 2023-11-29 21:21:08 发布

hugang35724

最新推荐文章于 2023-11-29 21:21:08 发布

阅读量270

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/hugang35724/article/details/83667827

本文介绍了一个基于jQuery的简单示例项目，通过自定义的弹窗来确认用户选择的图片。该示例展示了如何利用jQuery库创建交互式的确认对话框，并提供了完整的HTML和JavaScript代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

color=darkred][align=left]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
<script type="text/javascript" src="jquery-1.2.6.min.js">
</script>
<script type="text/javascript" src="jquery-impromptu.3.1.min.js">
</script>
<style type="text/css">
* { margin:0; padding:0;}
p{font-size:12px;}
#wrapper{ margin-left:auto; margin-right:auto; text-align:center; margin-top:100px;}
/*-------------impromptu的样式，可以进行修改---------- */
.jqifade{ position: absolute; background-color: #aaaaaa; }
div.jqi{ width: 400px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; position: absolute; background-color: #ffffff; font-size: 11px; text-align: left; border: solid 1px #eeeeee; -moz-border-radius: 10px; -webkit-border-radius: 10px; padding: 7px; }
div.jqi .jqicontainer{ font-weight: bold; }
div.jqi .jqiclose{ position: absolute; top: 4px; right: -2px; width: 18px; cursor: default; color: #bbbbbb; font-weight: bold; }
div.jqi .jqimessage{ padding: 10px; line-height: 20px; color: #444444; }
div.jqi .jqibuttons{ text-align: right; padding: 5px 0 5px 0; border: solid 1px #eeeeee; background-color: #f4f4f4; }
div.jqi button{ padding: 3px 10px; margin: 0 10px; background-color: #2F6073; border: solid 1px #f4f4f4; color: #ffffff; font-weight: bold; font-size: 12px; }
div.jqi button:hover{ background-color: #728A8C; }
div.jqi button.jqidefaultbutton{ background-color: #BF5E26; }
.jqiwarning .jqi .jqibuttons{ background-color: #BF5E26; }
/*-------------------------------- */
</style>

<script type="text/javascript">
$(document).ready(function(){
$("#sub").click(function(){

//这里对应的是ads文件夹里面的图片,名称为：avatar.jpg、hg.jpg
var city = "ads/"+$("#city").val()+".jpg";

if($("#city").val()!=null && $("#city").val()!=""){
var txt = '<img width="300" src="'+ city +'"/> <br><p>是否确认选择!</p>';

//这里可以进行各种确认效果的修改
$.prompt(txt,{
buttons:{'确定':true, '取消':false},
callback: function(v,m,f){
if(v){
$("form:first").submit();
}
}
});
}else{
$.prompt('请选择一个值');
}
});

});
</script>
</head>
<body>
<div id="wrapper">
<form action="" method="post">
<select id="city" >
<option value="">请选择</option>
<option value="avatar">1</option>
<option value="hg">2</option>
</select>
<br />
<br />
<input value="确定" type="button" id="sub"/>

<input name="" type="reset" value="取消" />
</form>
</div>

</body>
</html>[/align][/color]