Question

我正在寻找创建我自己的弹出对话框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用户/程序员），我将不胜感激。

那么，有人可以帮助我吗？

Answer 1

请参阅此jsFiddle

我猜你在创建弹出DOM元素并定位它时没有遇到麻烦。这就是为什么我没有浪费时间的原因。

我认为您的问题是获得答案并调用回调函数。关键是要使用Deferred对象，并等待它resolved或rejected。

另请参阅：http://api.jquery.com/jQuery.Deferred/

当我发现它时，这改变了我的生活;）

如果不清楚，请不要犹豫问我。

Answer 2

的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插件

创建一个Popup jQuery插件

2 个答案: