創建一個彈出窗口jQuery插件

我要找創造我自己的彈出式對話框的jQuery插件（我知道這看起來愚蠢，但請繼續閱讀）。我已經閱讀了更多關於在他們的文檔中創建jQuery插件的內容，並且我已經寫了一些內容，但是我意識到我不知道我的方向。我的意思是我應該有這樣的東西：創建一個彈出窗口jQuery插件

<div class="popup" id="myWindow">This is some of its contents</div> 
<script> 
$("#myWindow").popup({/* options */}, { ok: "Ok", cancel: "Cancel" /* buttons */ }); 
</script>

或者我應該去別的什麼？下面是我寫出頭，但我沒有尚未實現：

(function($) {   
    $.fn.popup = function(options) 
    { 
     var opts = $.extend({}, $.fn.popup.defaults, options);       
    };  
    $.fn.popup.defaults = { 
     width: "350px", 
     backgroundColor: "#ffffff" 
    };   
}(jQuery));

我並不真的需要有人給我寫整個代碼，但我想一些指導和依據。另外，如果你有時間去幫助一些片段（因爲我不是高級的jQuery用戶/程序員），我將不勝感激。

因此，任何人可以幫助我嗎？

來源

2014-05-15 Victor

你想在彈出窗口中加載一個頁面，或者只是模擬一個confirmmat離子盒？ –

我需要模擬確認框。 – Victor

看到這個jsFiddle

我猜你是不是麻煩創建彈出DOM元素和定位它。這就是爲什麼我沒有浪費時間。

我認爲你的問題是要得到答案，並調用回調函數。問題的關鍵是使用Deferred對象，並等待它是resolved或rejected。

參見：http://api.jquery.com/jQuery.Deferred/

這改變了我的生活，當我發現它;）

不要猶豫，問我的問題，如果事情是不明確的。

來源

2014-05-19 10:35:33

你肯定會在這個小提琴上付出一些努力和時間。雖然我將不得不研究你在那裏寫的東西，但看起來非常非常有希望！ – Victor

我的代碼混合了延遲對象和事件......我希望這不會讓你感到困惑。當您嘗試管理異步事件時，延遲對象非常有用...詢問您是否需要任何解釋！ –

我不會給你100個聲望呢。也許更好的東西會來！ :) – Victor

的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'); 
    }); 

}

這樣你就可以創建自己的jQuery插件

來源

2014-05-22 10:20:01

我沒有完成整個插件。這只是一個小演示開始 –

創建一個彈出窗口jQuery插件

回答

相關問題