`

弹出对话框

弹出对话框 
阅读更多 

<!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>
    <script src="../jquery/js/jquery-1.7.2.js" type="text/javascript"></script>
     <link rel="stylesheet"  href="css/myAlert.css" type="text/css" />
    <script type="text/javascript" src="js/myAlert.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#t").click(function(){
                sAlert({"msg":"这是我的确认对话框","left":"40%","top":"30%","title":"确认对话框","animate":"show"});
            });
            $("#aDel").click(function(){
                sConfirm({"msg":"确定要删除吗","left":"30%","top":"30%","title":"删除对话框","animate":"show",callback:function(){
                    sAlert({"msg":"删除成功","left":"30%","top":"30%","title":"确认对话框"});
                }});
            });
        });
    </script>
    <style type="text/css">

    </style>
    <title></title>

</head>
<body>
<div style="width: 1004px; margin: 0 auto;">

    <a href="#" id="t">确认</a>
    <a href="#" id="aDel">删除</a>
   </div>
</body>
</html>
 

 (function($){ 

/*
* sAlert({"left":"30%",top:"30%",,msg:"没有登陆"})
* sConfirm({"left":"30%",top:"30%",,msg:"没有登陆",callback:function(){这里是回调函数}})
* */
    $.alerts={
        _show:function(options,type){
            var defaults={
                left:"30%",//对话框左距离 30%
                top:"30%", //对话框顶距离
                title:"提示对话框",//标题
                msg:"",//提示信息，必填
                animate:"fade",//弹出效果，现在只支持fade和普通的show hide,参数为fade,或show
                callback:""
            };
            var opts= $.extend(defaults,options);
            var winwidth=$(document).outerWidth();
            var winheight=$(document).outerHeight();
            var div='<div id="windownbg"></div>'
            $(div).prependTo("body");
            $("#windownbg").css({width:winwidth+"px",height:winheight+"px",filter:"alpha(opacity=40)",opacity:"0.5","background-color": "#000000",position: "absolute", top: "0px", left: "0px"});
            switch(type){
                case "alert":
                    var alert="<div  id='alert'><div class='closeImg'><img src='images/close1.png' alt=''></div><div id='alertTitle'></div><div id='alertMsg'></div><div id='btnAlert'>确 认 </div></div>";
                    $("body").append(alert);
//                    if(!opts.left){ //指定默认值
//                        opts.left=(winwidth-$("#alert").width())/2+"px";
//                    }
//                    if(!opts.top){
//                        opts.top=(winheight-$("#alert").height())/2+"px";
//                    }
                    $("#alert").css({"left": opts.left,"z-index":101,"top": opts.top});
                    $("#alertMsg").text(opts.msg);
                    $("#alertTitle").text(opts.title);
                    switch(opts.animate){
                        case "fade":
                            $("#alert").fadeIn();
                         break;
                        case "show":
                            $("#alert").show();
                         break;
                    }
                    $("#btnAlert").click(function(){
                         $.alerts._hide("alert",opts.animate);
                     });
                    $(".closeImg").click(function(){
                        $.alerts._hide("alert",opts.animate);
                    });
                    break;
                case "confirm":
                    var confirm="<div  id='confirm'><div class='closeImg'><img src='images/close1.png' alt=''></div><div id='confirmTitle'></div><div id='confirmMsg'></div><div id='btnConfirm'>确定</div><div id='ConfirmCancel'>取消 </div></div>";

                    $("body").append(confirm);

                    $("#confirmMsg").text(opts.msg);
                    $("#confirmTitle").text(opts.title);
//                    if(!opts.left){
//                        opts.left=(winwidth-$("#alert").width())/2+"px";
//                    }
//                    if(!opts.top){
//                        opts.top=(winheight-$("#alert").height())/2+"px";
//                    }
                    $("#confirm").css({"left":opts.left,"z-index":101,"top":opts.top});
                    switch(opts.animate){
                        case "fade":
                            $("#confirm").fadeIn();
                            break;
                        case "show":
                            $("#confirm").show();
                            break;
                    }
                    $("#ConfirmCancel").click(function(){
                        $.alerts._hide("confirm",opts.animate);
                    });
                    $("#btnConfirm").click(function(result){
                        if ($.isFunction(opts.callback)) {
                            opts.callback(result);
                        }
                        $.alerts._hide("confirm",opts.animate);
                    });
                    $(".closeImg").click(function(){
                        $.alerts._hide("confirm",opts.animate);
                    });

            }
        },
        _hide:function(type,animate){
            switch(type){
                case "alert":
                    $("#windownbg").remove();
                    switch(animate){
                        case "fade":
                            $("#alert").fadeOut();
                         break
                        case "show":
                            $("#alert").hide();
                         break;
                    }
                 break;
                case "confirm":
                    $("#windownbg").remove();
                    switch(animate){
                        case "fade":
                            $("#confirm").fadeOut();
                            break
                        case "show":
                            $("#confirm").hide();
                            break;
                    }
                 break;
            }
        },
        alert:function(option,type){
            $.alerts._show(option,type);
        },
        confirm:function(option,type){
            $.alerts._show(option,type);
        }
    }
    sAlert=function(option){
        $.alerts.alert(option,"alert");
    },
    sConfirm=function(option){
        $.alerts.confirm(option,"confirm");
    }
})(jQuery);
分享到：
| android 打开本地文件
评论
发表评论

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

相关推荐

    VC++如何弹出对话框Dialog

    - 在需要弹出对话框的地方，创建对话框对象，然后调用`DoModal()`方法。如果`DoModal()`返回IDOK（通常是用户点击了“确定”按钮），则表示用户完成了对话；如果是IDCANCEL（“取消”按钮），则表示用户终止了对话...

    WEB弹出对话框

    在Web开发中，弹出对话框是不可或缺的功能之一，它能提供用户交互并接收用户输入。在本案例中，我们关注的是如何在Visual Studio 2005 (VS2005) 中方便地实现这一功能。标题提到的"WEB弹出对话框"指的是在网页上显示...

    asp.net弹出对话框常用技巧

    ### ASP.NET 中弹出对话框的常用技巧 在ASP.NET应用程序开发过程中，经常需要通过弹出对话框的方式向用户提示信息、确认操作等。本文将详细介绍几种常用的在ASP.NET中实现弹出对话框的方法，适合ASP.NET初学者学习...

    使用html+css+js实现自定义弹出对话框/输入框

    在实现弹出对话框时，我们需要创建一个包含对话框元素的容器，例如`&lt;div&gt;`，并设置相应的ID或类名以便于CSS和JavaScript操作。例如： ```html 自定义对话框 请输入内容"&gt; 关闭 ``` 接着，CSS（Cascading ...

    asp.net弹出对话框

    在 ASP.NET 中，我们有时需要实现弹出对话框的功能，以便与用户进行交互，例如确认操作、输入数据或者显示警告信息。在描述中提到的“asp.net弹出对话框”，主要是指在网页中弹出一个模态或非模态的窗口，让用户参与...

    vc6.0下实现单击弹出对话框

    在VC6.0环境下，利用MFC（Microsoft Foundation Classes）框架进行Windows应用程序开发时，创建一个单击菜单项弹出对话框的操作是常见的需求。MFC是微软为简化Windows API编程而提供的C++类库，它封装了许多Windows ...

    漂亮的网页弹出对话框

    "漂亮的网页弹出对话框"是指在网页中实现美观且功能丰富的弹窗效果。这类对话框可以增强用户体验，使网站看起来更加专业和精致。本主题将深入探讨如何创建和实现这样的对话框。 首先，我们要了解弹出对话框的基本...

    asp.net(C#)里弹出对话框并在设定时间内关闭

    asp.net(C#)里点击页面某一项，弹出对话框显示其详细信息，并可以设置自动关闭对话框的时间。

    JQuery实现对话框效果 即弹出对话框背景变暗且不可操作

    本文将深入探讨如何使用jQuery实现一个对话框效果，即在弹出对话框时，背景变暗并且用户无法操作背景内容，以提供更好的用户体验。 首先，要实现这种效果，我们需要引入jQuery库到我们的HTML文件中。可以使用CDN...

    点击按钮弹出对话框代码

    在JavaScript中，弹出对话框有几种常见的方法。最基本的有`alert()`用于显示警告信息，`prompt()`用于获取用户输入，以及`confirm()`用于请求用户确认。这些内置对话框都是阻塞式的，意味着它们会暂停页面的执行，...

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

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

    纯CSS实现div弹出对话框

    纯CSS实现div弹出对话框 可以应用于C#，.net 里面。 页面比较好看。

    Java编程实现按钮弹出对话框操作

    利用Java编写的弹出对话框小程序，比较经典，分享一下

    html5简单的手机端弹出对话框确认代码

    HTML5是现代网页开发的核心标准，它为开发者提供了...以上就是关于“html5简单的手机端弹出对话框确认代码”的知识点介绍。通过理解并实践这些技术，开发者可以提升网页应用的交互性和用户体验，尤其是在移动设备上。

    VC中弹出对话框的实现

    【VC中弹出对话框的实现】涉及到的是C++编程中的MFC（Microsoft Foundation Classes）框架，用于构建Windows桌面应用程序。MFC提供了一种结构化的、面向对象的方式来编写Windows应用程序，其中包括对话框（Dialog）...

    js弹出对话框 源代码

    在网页设计中，弹出对话框是常见的用户交互方式，可以用来显示警告信息、获取用户输入或进行确认操作。本文将深入探讨如何使用JS创建具有圆角和关闭按钮的对话框，并涵盖五种不同的展示风格。 首先，我们需要了解...

    自动弹出对话框代码 网页设计特效 美工助手

    【自动弹出对话框代码详解】网页设计中，自动弹出对话框是一种常见的特效，用于显示额外信息，如警告、版权声明或者欢迎消息。实现这一功能并不复杂，主要依赖于JavaScript语言。以下将详细介绍如何创建并自定义弹出...

    (java)Swing中弹出对话框的几种方式

    在Java的Swing框架中，弹出对话框是与用户交互的一种常见方式，主要用于限制用户行为、提示用户操作结果或请求用户输入。JOptionPane类在Swing中扮演着关键角色，它提供了一系列静态方法用于创建各种标准对话框，如...

    Android弹出对话框

    在给定的标题“Android弹出对话框”中，我们可以理解这是关于如何在Android环境中创建和使用对话框的教程。描述提到的“完整的代码”涵盖了多选、单选和登录验证等不同类型的对话框功能，这将涉及到Android SDK中的...

    swift-PopupDialog采用Swif编写的一个简单可定制的iOS弹出对话框.

    PopupDialog是iOS应用开发中的一款库，它使用Swift语言编写，专为创建可自定义的弹出对话框而设计。这个库提供了一种替代UIAlertControllers的alert风格的方式，使得开发者可以更加灵活地调整对话框的外观和功能，以...

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