`
hugang357
  • 浏览: 181394 次
  • 性别: Icon_minigender_2
  • 来自: 深圳
社区版块
存档分类
最新评论

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

WindowswebkitWebHTMLF# 
阅读更多
color=darkred]
<!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"/>
&nbsp;&nbsp;&nbsp;&nbsp;
<input name="" type="reset" value="取消" />
</form>
</div>

    </body>
</html>
[/color]
分享到：
| MyEclipse安装ExtJS插件–Spket IDE
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics