<!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>
相关推荐
### 自定义弹出框样式 alert修改 在网页开发过程中，我们经常会遇到需要向用户展示提示信息的情况。传统的JavaScript `alert`方法虽然简单易用，但其样式固定且无法自定义，这在追求用户体验和界面美观的现代Web...
为了实现自定义的弹出框效果，开发者通常会选择自定义视图并添加到窗口（`UIWindow`）上，或者使用第三方库如`SDCAlertView`、`SweetAlert`等。在这个案例中，提到的`TestIDFModalView`可能就是一个自定义弹出框的...
在JavaScript编程中，"自定义弹出框alert"是一个常见的需求，特别是在开发具有个性化交互体验的Web应用时。原生的`alert()`函数虽然简单易用，但其样式和功能非常有限，无法满足复杂的用户界面设计。因此，开发者...
有时候感觉系统自带的提示框太丑了，试试自定义提示框吧，直接引用js即可
本文将详细解析如何利用HTML、CSS和jQuery来创建一个自定义的弹出框，即"自定义jquery弹出框demo1"。 首先，我们需要理解HTML结构。在创建弹出框时，我们通常会有一个隐藏的div元素，这个div包含了弹出框的所有内容...
JavaScript弹出框组件的核心在于模拟原生的alert(), confirm() 和 prompt()函数，但提供更多的自定义选项。这些组件通常由HTML结构、CSS样式和JavaScript逻辑三部分组成。HTML负责构建弹出框的布局和元素，CSS用于...
自定义弹出框可以提供更灵活的界面设计和用户体验，相比浏览器内置的alert、confirm、prompt等基本对话框，有着更高的可定制性。 自定义弹出框的实现方式多种多样，以下是一些关键知识点： 1. **HTML结构**：首先...
自定alert弹出框，自己可以做相应的修改、美化
在ActionScript 3（AS3）中，自定义弹出框是创建用户界面时非常常见的一种需求。通常，系统默认的弹出框可能无法满足所有设计和功能要求，因此开发者会选择自定义弹出框来提供更个性化的用户体验。标题"as3自定义弹...
在JavaScript编程中，"js精美弹出框alert"是指通过自定义的方式，创建美观且功能丰富的弹出警告对话框，以替代系统默认的简单且样式单一的`alert()`函数。通常，开发者会使用CSS和JavaScript库来实现这种效果，以...
在iOS开发中，自定义alertView弹出框是一个常见的需求，特别是在设计用户交互界面时，为了提供更好的用户体验，开发者经常需要创建具有独特样式和功能的弹出提示。在苹果的UIKit框架中，虽然提供了预设的UIAlertView...
"js自定义弹出框样式"这个主题涵盖了如何利用JavaScript和相关前端技术来创建不同于系统默认的alert和confirm对话框。下面我们将深入探讨这个话题。 首先，`alert`和`confirm`是JavaScript内置的两种弹窗函数，它们...
默认的浏览器弹出框（如alert、confirm和prompt）样式单一，不能满足个性化设计的需求。因此，开发者经常选择创建自定义弹出框，以便更好地控制弹出框的外观和功能。 在jQuery中，实现自定义弹出框的方法有很多，...
闭包自定义alert 弹出框
在前端开发中，用户界面的交互性和美观性是至关重要的，而自定义遮罩和Alert弹出框样式正是实现这一目标的关键技术。本文将深入探讨这两个主题，帮助开发者提升其应用的用户体验。 首先，我们来了解遮罩层（Mask）...
用闭包的技术实现alert 弹出框效果，样式可以自己添加调整，使弹出框更加有弹性。更多变灵活
在IT行业中，自定义Alert提示框是一个常见的需求，特别是在开发用户界面时，为了提供更加个性化和符合品牌风格的用户体验。通常，系统自带的alert对话框样式单一，难以满足设计和功能上的扩展要求。本篇文章将深入...
本篇文章将深入探讨“弹出框插件”，特别是基于jQuery的alert弹出框插件，它以其美观性和易用性而受到开发者的欢迎。 首先，我们要理解什么是弹出框。在Web开发中，弹出框通常是网页内容之外独立显示的小窗口，用于...