`
乌托邦之爱
  • 浏览: 282677 次
  • 性别: Icon_minigender_1
  • 来自: 沈阳
社区版块
存档分类
最新评论

jQuery Alert contform 弹出提示对话框美化插件

jQueryJavaScriptCSSwebkitHTML 
阅读更多

jquery美化的填出提示对话框美化插件

 

调用页面:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JQuery插件:alert、confirm、prompt对话框插件-Download by http://www.jb51.net</title>
<style type="text/css">
   BODY,
   HTML {
    padding: 0px;
    margin: 0px;
   }
   BODY {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    background: #FFF;
    padding: 15px;
   }
   
   H1 {
    font-size: 20px;
    font-weight: normal;
   }
   
   H2 {
    font-size: 16px;
    font-weight: normal;
   }
   
   FIELDSET {
    border: solid 1px #CCC;
    -moz-border-radius: 16px;
    -webkit-border-radius: 16px;
    border-radius: 16px;
    padding: 1em 2em;
    margin: 1em 0em;
   }
   
   LEGEND {
    color: #666;
    font-size: 16px;
    padding: 0em .5em;
   }
   
   PRE {
    font-family: "Courier New", monospace;
    font-size: 11px;
    color: #666;
    background: #F8F8F8;
    padding: 1em;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
   }
   
   /* Custom dialog styles */
   #popup_container.style_1 {
    font-family: Georgia, serif;
    color: #A4C6E2;
    background: #005294;
    border-color: #113F66;
   }
   
   #popup_container.style_1 #popup_title {
    color: #FFF;
    font-weight: normal;
    text-align: left;
    background: #76A5CC;
    border: solid 1px #005294;
    padding-left: 1em;
   }
   
   #popup_container.style_1 #popup_content {
    background: none;
   }
   
   #popup_container.style_1 #popup_message {
    padding-left: 0em;
   }
   
   #popup_container.style_1 INPUT[type='button'] {
    border: outset 2px #76A5CC;
    color: #A4C6E2;
    background: #3778AE;
   }
   
  </style>
  
  <!-- Dependencies -->
  <script src="jquery.js" type="text/javascript"></script>
  <script src="jquery.ui.draggable.js" type="text/javascript"></script>
  
  <!-- Core files -->
  <script src="jquery.alerts.js" type="text/javascript"></script>
  <link href="jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />
  
  <!-- Example script -->
  <script type="text/javascript">
   
   $(document).ready( function() {
    
    $("#alert_button").click( function() {
     jAlert('This is a custom alert box', 'Alert Dialog');
    });
    
    $("#confirm_button").click( function() {
     jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) {
      jAlert('Confirmed: ' + r, 'Confirmation Results');
     });
    });
    
    $("#prompt_button").click( function() {
     jPrompt('Type something:', 'Prefilled value', 'Prompt Dialog', function(r) {
      if( r ) alert('You entered ' + r);
     });
    });
    
    $("#alert_button_with_html").click( function() {
     jAlert('You can use HTML, such as <strong>bold</strong>, <em>italics</em>, and <u>underline</u>!');
    });
    
    $(".alert_style_example").click( function() {
     $.alerts.dialogClass = $(this).attr('id'); // set custom style class
     jAlert('This is the custom class called &ldquo;style_1&rdquo;', 'Custom Styles', function() {
      $.alerts.dialogClass = null; // reset to default
     });
    });
   });
   
  </script>
  
 </head>
 
 <body>
  
  <h1>&laquo; jQuery Alert Dialogs (Alert, Confirm, &amp; Prompt Replacements)</h1>
  
  <h2>基本范例</h2>
  
  <fieldset>
   <legend>Alert</legend>
<pre>
jAlert('This is a custom alert box', 'Alert Dialog');
</pre>
   <p>
    <input id="alert_button" type="button" value="Show Alert" />
   </p>
  </fieldset>
  
  
  <fieldset>
   <legend>Confirm</legend>
<pre>
jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) {
    jAlert('Confirmed: ' + r, 'Confirmation Results');
});
</pre>
   <p>
    <input id="confirm_button" type="button" value="Show Confirm" />
   </p>
  </fieldset>
  
  <fieldset>
   <legend>Prompt</legend>
<pre>
jPrompt('Type something:', 'Prefilled value', 'Prompt Dialog', function(r) {
    if( r ) alert('You entered ' + r);
});
</pre>
   <p>
    <input id="prompt_button" type="button" value="Show Prompt" />
   </p>
  </fieldset>
  
  
  
  <h2>高级范例</h2>
  <fieldset>
   <legend>对话框带HTML代码</legend>
<pre>
jAlert('You can use HTML, such as <strong>bold</strong>, <em>italics</em>, and <u>underline</u>!');
</pre>
   <p>
    <input id="alert_button_with_html" type="button" value="Show Alert" />
   </p>
  </fieldset>
  
  <fieldset>
   <legend>Alternate Styles</legend>
   <p>
    By changing the value of the <samp>$.alerts.dialogClass</samp> property (and creating
    your own CSS class), you can changes the style of your dialogs:
   </p>
   
   <p>
    <input id="style_1" class="alert_style_example" type="button" value="Style 1" />
   </p>
   
   <p>
    View the plugin source for additional properties that can be modifed at runtime.
   </p>
  </fieldset>
</body>
</html>

 

分享到：
| jquery倒计时插件
评论
7 楼 kongzhizhen 2010-10-26  
赞一个，建议加上遮罩的效果吧。
6 楼 xuzhoudeliujin 2010-10-24  
希望多出精品！！
5 楼 cloudgamer 2010-10-21  
这个在ie6不会随屏移动
我这里有一个可以随屏移动的弹出框效果
4 楼 grossofans 2010-10-20  
用jQuery Impromptu不要自己造车子啦
http://trentrichardson.com/Impromptu/index.php
3 楼 小碗拉面加蛋 2010-10-20  
http://abeautifulsite.net/blog/2008/12/jquery-alert-dialogs/
开发者博客在这里
2 楼 surfire91 2010-10-19  
又看了下代码，遮盖层是有的。
1 楼 surfire91 2010-10-19  
我看了下，还不错。就是不知道有没有遮罩层。
发表评论

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

相关推荐

    jQuery的弹出警告对话框美化插件

    基于jQuery的弹出警告对话框美化插件(警告，确认和提示) 这个Jquery插件的目的是替代JavaScript的标准函数alert&#40;&#41;，confirm（），和 prompt（）。这个插件有 如下这些特点： 1：这个插件可以使你可以...

    SweetAlert2弹出消息对话框插件

    SweetAlert2弹出消息对话框插件是一款含有多种情景模式的jQuery模态消息对话框代码，用于替代浏览器默认的弹出对话框，它提供各种参数和方法，支持嵌入图片，背景，HTML标签等，功能非常强大。 再献上一个相关的带6...

    jQuery点击按钮弹出3D对话框窗口插件.zip

    通过使用这个插件，开发者可以轻松地在网页上添加一个具有3D翻转效果的弹出对话框，提升用户体验。 **jQuery基础** jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互。jQuery的...

    jQuery遮罩背景弹出层对话框插件

    jQuery遮罩背景弹出层对话框插件是一种广泛应用于网页交互设计中的技术，它通过结合JavaScript库jQuery和CSS样式来实现动态的、具有视觉吸引力的弹出对话框效果。这种插件可以为用户提供丰富的交互体验，例如显示...

    jQuery遮罩背景弹出层对话框插件.zip

    在本资源"jQuery遮罩背景弹出层对话框插件.zip"中，我们可以找到一个用于创建遮罩背景和弹出对话框的jQuery插件。这个插件可以帮助开发者快速实现页面中的模态窗口，比如警告提示、信息确认或用户输入等场景。 首先...

    jQuery手机移动端弹出确认对话框插件

    3. **jQuery代码**：利用jQuery，我们可以添加事件监听器，当用户触发特定行为（如点击按钮）时弹出对话框。这通常通过`.click()`方法实现。同时，我们还需要编写函数来显示和隐藏对话框，这可以通过改变对话框元素...

    jQuery点击按钮弹出对话框窗口提示插件

    本文将详细讲解如何使用jQuery实现一个点击按钮弹出对话框窗口提示的插件，以便用户在执行关键操作前进行确认或取消。 首先，我们需要引入jQuery库。在`index.html`文件中，添加以下代码片段来引入jQuery： ```...

    jQuery弹出层对话框插件

    不错的jQuery弹出层对话框插件，目前几个项目都在用，调用方便很实用，方便扩展； 对话框标题可自由拖动； 边框支持多浏览器半透明； 支持半遮罩背景设置； 支持回调函数使用； 传参方便，一行代码搞定调用，希望能...

    jQuery Alert弹窗插件点击弹出对话框代码

    jQuery Alert是一款基于jQuery库的弹窗插件，用于在网页中实现更为美观和功能丰富的对话框效果。这个插件能够帮助开发者轻松创建各种类型的提示、警告、确认和自定义消息框，而不再局限于浏览器自带的alert函数。在...

    jQuery点击按钮弹出3D对话框窗口插件

    这是一款jQuery实现的可以使用鼠标进行互动的3D弹出窗口插件，点击按钮弹出3D对话框窗口网页特效。

    jQuery点击弹出提示对话框插件带20种效果

    - `js`：JavaScript库和插件脚本，用于处理点击事件和弹出对话框的功能。 - `css`：CSS样式表，定义了对话框及其元素的样式。 在实际应用中，开发者可以将这个插件与HTML、CSS和jQuery库一起整合到项目中，通过简单...

    jquery弹出登录对话框

    在网页开发中，提供友好的用户交互体验是至关重要的，其中，弹出对话框是一种常见的交互方式。在本文中，我们将深入探讨如何利用jQuery库创建一个弹出登录对话框，为用户提供无缝且直观的登录功能。 一、jQuery简介...

    jQuery Dialog 弹出层对话框插件(可加载url地址)

    **jQuery Dialog弹出层对话框插件：深入解析与应用** jQuery Dialog是jQuery UI库中的一个组件，它提供了一种优雅的方式在网页上创建交互式的弹出层对话框。这个插件不仅允许用户展示信息，还可以加载外部URL内容，...

    jQuery_boxy弹出层对话框插件中文演示及讲解

    该插件能够创建模态或非模态的弹出对话框，功能包括提示、确认、拖动、改变大小以及Ajax数据加载。由于网上缺乏详细的中文教程，作者zhangxinxu花费一天时间将官方英文文档翻译成中文，并对插件进行了一些定制，包括...

    jQuery点击弹出提示对话框插件带20种效果.zip

    "jQuery点击弹出提示对话框插件带20种效果.zip"是一个集成了多种提示对话框样式的资源包，对于提升网站的交互体验有着显著的效果。本文将详细介绍这个插件的使用方法以及其包含的各种效果。 首先，这个插件基于...

    JQuery Alert 弹出框美化(Alert, Confirm, & Prompt Replacements)

    而"JQuery Alert 弹出框美化(Alert, Confirm, & Prompt Replacements)"是针对浏览器原生的alert、confirm和prompt对话框的一种美化和功能增强方案，旨在提升用户体验并提供更丰富的交互。 原生的JavaScript alert、...

    jQuery弹出层对话框插件.zip

    在实际项目中，这种弹出层对话框插件常用于用户确认操作（如删除、提交表单）、显示警告信息、提供帮助提示等多种场景。比如，当用户尝试删除一条记录时，弹出对话框询问用户是否确认，增强了用户体验并避免了误操作...

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