<!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>
相关推荐
1. **自定义样式**：通过CSS，开发者可以设计出美观且符合网站风格的弹出框，包括背景、边框、按钮样式等，从而提升弹出框的视觉吸引力。 2. **动态加载内容**：使用Ajax技术，弹出框可以异步加载页面内容，无需...
ThickBox 是一个早期的 jQuery 弹出框插件，用于显示大尺寸的图片或视频。它使用半透明背景来突出显示当前查看的内容，并且支持多种动画效果。 **3.13 Galleria** Galleria 是一个功能强大的 jQuery 图片画廊插件...
4. JavaScript 基础：在JavaScript中，使用`alert("Hello World")`可以弹出显示"Hello World"的警告对话框。 5. Java 数据类型：Java的浮点型数据类型包括float和double，其中double精度更高。 6. 计算机病毒：...
// 自定义消息：弹出气泡 WM_ICONTRAY = WM_USER + 2; // 自定义消息：托盘消息 NIF_INFO = $10; NIF_MESSAGE = 1; NIF_ICON = 2; NOTIFYICON_VERSION = 3; NIF_TIP = 4; NIM_SETVERSION = $00000004; NIM_...