Question
I am looking for creating my own popup dialog jQuery plugin (I know this looks stupid, but please, go ahead reading). I have read more about creating plugin in jQuery in their documentation and I've already written something but I realized that I don't know my directions. I mean should I have something like:
https://stackoverflow.com/questions/23684765
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian<div class="popup" id="myWindow">This is some of its contents</div>
<script>
$("#myWindow").popup({/* options */}, { ok: "Ok", cancel: "Cancel" /* buttons */ });
</script>
or should I go for somethings else? Below is somethings I've written, but I don't have an implementation yet:
(function( $ ) {
$.fn.popup = function( options )
{
var opts = $.extend({}, $.fn.popup.defaults, options);
};
$.fn.popup.defaults = {
width: "350px",
backgroundColor: "#ffffff"
};
}(jQuery));
I don't really need somebody to write my entire code, but I want some directions and references. Also, if you have the time to help with some snippets (because I am not an advanced jQuery user/programmer), I will be grateful.
So, can anybody help me?
Solution
See this jsFiddle
I guess you are not in trouble in creating the popup DOM element and positioning it. That's why i did not wast time on that.
I assume your problem is to get the answer and call callback functions. The point is to use a Deferred object, and wait for it to be resolved or rejected.
See also : http://api.jquery.com/jQuery.Deferred/
This changed my life when I discovered it ;)
Do not hesitate to ask me question if something is not clear.
OTHER TIPS
index.html
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="js/popup.js"></script>
<link type="text/css" rel="stylesheet" href="css/style.css">
</head>
<body>
<a href="javascript:;" onclick="dialog('I am just a warning');">Warning</a>
<a href="javascript:;" onclick="dialog('I am just an info');">Info</a>
<a href="javascript:;" onclick="dialog('I am just an error');">Error</a>
<a href="javascript:;" onclick="dialog('I am just a success');">Success</a>
<!-- Dialog box starts-->
<div class="overlay"></div>
<div id="maindialog">
<div id="dialog">
<div id="title">The page at SiteName:</div>
<div class="desc"></div>
<div class="confirm_btn">
</div>
</div>
</div>
<!-- Dialog box ends-->
</body>
</html>
style.css
body{background:#f8f8f8; font-family:Arial; font-size:12px; color:#555;}
/* Dialog code starts here */
.overlay {
bottom: 0;
left: 0;
position: fixed;
display:none;
right: 0;
top: 0;
background:#000;
opacity:0.6;
z-index: 100;
}
#maindialog{
top:-150px;
width:100%;
position: fixed;
z-index: 1000;
}
#dialog{
margin:0 auto;
width: 500px;
background-color: #ffffff;
border: 1px solid #999;
border: 1px solid rgba(0, 0, 0, 0.3);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
outline: none;
}
#dialog div#title{
padding:8px 20px;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #f6f6f6) );
background:-moz-linear-gradient( center top, #ffffff 5%, #f6f6f6 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6');
background-color:#ffffff;
color:#444;
border-top-left-radius:4px;
border-top-right-radius:4px;
font-size:14px;
font-weight:bold;
border-bottom:#ddd 1px solid;
}
#dialog div.desc{
padding:15px 20px;
background:#fff;
color:#666;
font-size:12px;
border-bottom:#ccc 1px solid;
}
#dialog div.confirm_btn{
padding:10px 20px;
background:#f7f7f7;
border-bottom-left-radius:4px;
border-bottom-right-radius:4px;
text-align:right;
border-top:#fff 1px solid;
}
/* Cancel button code */
#dialog div.confirm_btn a {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #f6f6f6) );
background:-moz-linear-gradient( center top, #ffffff 5%, #f6f6f6 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6');
background-color:#ffffff;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
border:1px solid #dcdcdc;
display:inline-block;
color:#666666;
font-family:arial;
font-size:12px;
font-weight:bold;
padding:5px 20px;
text-decoration:none;
}
#dialog div.confirm_btn a:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f6f6f6), color-stop(1, #ffffff) );
background:-moz-linear-gradient( center top, #f6f6f6 5%, #ffffff 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#ffffff');
background-color:#f6f6f6;
}
#dialog div.confirm_btn a:active {
position:relative;
top:1px;
}
popup.js
/*
* jQuery Plugin for popup
* License : Open Source
* Version : 1.0
* Author : Rohit Batham
*/
function dialog(desc){
$('#dialog div.desc').html(desc);
$('#dialog div.confirm_btn').html('<a href="#" class="accept_btn">Ok</a>');
$('.overlay').fadeIn('fast');
$('#maindialog').animate({ top : '180px'});
// Trigging on pressed ACCEPT
$('.accept_btn').click(function(){
$('#maindialog').animate({ top : '-150px'});
$('.overlay').fadeOut('fast');
});
}
Like this you can create you own jQuery Plugin
