Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Testing</title>  
        <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js" type="text/javascript"></script>
        <style type="text/css"></style> 
        <script type="text/javascript"> 
            $(function(){
​
                ayb={};
​
                ayb.dialogError=function(t,e) {
                    getEm=function(){return {e:e,t:t};}
                    var v={e:e,t:t};
                    if (typeof this.dialog === 'undefined') {
                        var title=$('<h1/>');
                        var errors=$('<ul/>');
                        this.dialog=$('<div/>', {
                            title:'AN ERROR OCCURRED',
                            style:'color: #333;font-size: 11px;font-weight: bolder; padding: 20px 0 0 15px;'
                        })
                        .append(title).append(errors).appendTo('body')
                        .dialog({
                            autoOpen    : false,
                            resizable   : false,
                            height      : 300,
                            width       : 440, 
                            modal       : true,
                            dialogClass : 'hide-title-bar',
                            open: function(event, ui){
                                console.log('Wrong values in dialog.open!',t,e,v.t,v.e);
                                var o=getEm();
                                title.text(o.t);
                                errors.html('');
                                if (!(o.e instanceof Array)) {o.e=[o.e];}
                                for(var i in o.e){errors.append($('<li/>',{text:o.e[i],style:'padding-top: 10px;'}));}
                            },
                            buttons: [
                                {
                                    text     : 'CLOSE',
                                    "class"  : 'gray',
                                    click    : function() {
                                        $(this).dialog("close");
                                    }
                                }
                            ]
                        });
                        console.log(this.dialog);
                    };
                    this.dialog.dialog('open');
                }
​
                $('#e1').click(function(){ayb.dialogError('Title1',['error1-1','error1-2'])});
                $('#e2').click(function(){ayb.dialogError('Title2','error2-1')});
​
            });
        </script>
    </head>
​
    <body>
        <button id="e1">one</button>
        <button id="e2">two</button>
    </body> 
</html> 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers