jquery仿alert提⽰框、confirm确认对话框、prompt带输⼊的提⽰框插件[。。。
第⼀步：引⼊所需要的jquery插件⽂件：
第⼆步：引⼊所需的样式：
#popup_container {font-family: Arial, sans-serif;font-size: 12px;min-width: 300px;max-width: 600px;background:#FFF;border:solid 5px #999;color:#000;-moz-border-radius:5px;-webkit-border-radius: 5px;border-radius: 5px;}
#popup_title {font-size:14px;font-weight:bold;text-align:center;line-height:1.75em;color:#666;background: #CCC url(/images/eg/title.gif) top repeat-x;border: solid 1px #FFF;border-bottom: solid 1px #999;cursor: default;padding:0em;margin:0em aut #popup_content {background:16px 16px no-repeat url(/images/eg/info.gif);padding: 1em 1.75em;margin: 0em;}
debugger for chrome 废弃
ztree树#popup_content.alert {background-image: url(/images/eg/info.gif);}
#firm {background-image: url(/images/eg/important.gif);}
#popup_content.prompt {background-image: url(/images/eg/help.gif);}
#popup_message {padding-left: 48px;}
#popup_panel {text-align: center;margin:1em 0em 0em 1em;}
#popup_prompt {margin:.5em 0em;}
注意把上⾯样式中的图⽚先保存到本地，然后替换成⾃⼰的路径！
第三步：就可以直接引⽤了，看下⾯简单的实例：
$("#alert_button").click( function() {
jAlert('这是⼀个可⾃定义样式的警告对话框', '警告对话框');
});
$("#confirm_button").click( function(){
jConfirm('你确定这么做吗?', '确认对话框',function(r){
jAlert('是否确定 ' + r, '确定内容');
});
jquery下载文件插件
});
$("#prompt_button").click( function(){
jPrompt('输⼊字符:', '这⾥是默认值', '带输⼊框的提⽰框', function(r) {
if( r ){alert('你输⼊的是 ' + r)};
});
});
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>zhezhaoceng.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="<%=contextPath %>/core/js/jquery/jquery-1.4.2.js"></script>
<script type="text/javascript" src="jquery.alerts.js"></script>
<style>
#popup_container {font-family: Arial, sans-serif;font-size: 12px;min-width: 300px;max-width: 600px;background:#FFF;border:solid 5px #999;color:#000;-moz-border-radius:5px;-webkit-border-radius: 5px;border-radius: 5px;}
#popup_title {font-size:14px;font-weight:bold;text-align:center;line-height:1.75em;color:#666;background: #CCC url(/images/eg/title.gif) top repeat-x;border: solid 1px #FFF;border-bottom: solid 1px #999;cursor: default;padding:0em;margin
#popup_content {background:16px 16px no-repeat url(/images/eg/info.gif);padding: 1em 1.75em;margin: 0em;}
#popup_content.alert {background-image: url(/images/eg/info.gif);}
#firm {background-image: url(/images/eg/important.gif);}
#popup_content.prompt {background-image: url(/images/eg/help.gif);}
#popup_message {padding-left: 48px;}
#popup_panel {text-align: center;margin:1em 0em 0em 1em;}
#popup_prompt {margin:.5em 0em;}
</style>
<script type="text/javascript">
$("#alert_button").click( function() {
jAlert('这是⼀个可⾃定义样式的警告对话框', '警告对话框');
});
$("#confirm_button").click( function(){
jConfirm('你确定这么做吗?', '确认对话框',function(r){
jAlert('是否确定 ' + r, '确定内容');
});
});
$("#prompt_button").click( function(){
jPrompt('输⼊字符:', '这⾥是默认值', '带输⼊框的提⽰框', function(r) {
if( r ){alert('你输⼊的是 ' + r)};
});
});
</script>
</head>
<body>
<div id="Con" class="ConDiv">
<fieldset>
<legend>警告提⽰框（Alert）</legend>
<pre>            $("#alert_button").click( function() {
jAlert('这是⼀个可⾃定义样式的警告对话框', '警告对话框');
});
</pre>
<p>
<input id="alert_button" type="button" value="警告提⽰框">
</p>
</fieldset>
<script language="javascript">
$(function(){
$("#alert_button").click( function() {
jAlert('这是⼀个可⾃定义样式的警告对话框', '警告对话框');
});
});
</script>
<fieldset>
<legend>确认对话框（Confirm）</legend>
<pre>        $("#confirm_button").click( function(){
jConfirm('你确定这么做吗?', '确认对话框',function(r){
jAlert('是否确定 ' + r, '确定内容');
});
});
</pre>
<p>
<input id="confirm_button" type="button" value="确认对话框">
</p>
</fieldset>
<script language="javascript">
$(function(){
$("#confirm_button").click( function(){
jConfirm('你确定这么做吗?', '确认对话框',function(r){
jAlert('是否确定 ' + r, '确定内容');
});
});
});
</script>
<fieldset>
<legend>带输⼊的提⽰框（Prompt）</legend>
linux授权命令chmod777
<pre>            jPrompt('输⼊字符:', '这⾥是默认值', '带输⼊框的提⽰框', function(r) {
if( r ) alert('你输⼊的是 ' + r);
});
</pre>整站上千源码
<p>
<input id="prompt_button" type="button" value="带输⼊框的提⽰框">
</p>
</fieldset>
<script language="javascript">
$(function(){
$("#prompt_button").click( function(){
jPrompt('输⼊字符:', '这⾥是默认值', '带输⼊框的提⽰框', function(r) {
if( r ){alert('你输⼊的是 ' + r)};
});
});
});
</script>
<fieldset>
<legend>带HTML输出效果的对话框</legend>
<pre>            jAlert('你可以使⽤HTML标签，⽐如<strong>加粗</strong>, <em>斜体</em>，和<u>下划线</u>!');
</pre>
<p>
ajax技术的描述<input id="alert_button_with_html" type="button" value="显⽰带有HTML标签效果的弹出框">
</p>
</fieldset>
<script language="javascript">
$(function(){
$("#alert_button_with_html").click( function(){
jAlert('你可以使⽤HTML标签，⽐如 <strong>加粗</strong>, <em>斜体</em>，和 <u>下划线</u>!');
});
});
</script>
</div>
</body>
</html>

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