jQuery 警报框答案

【问题标题】：jQuery Alert BoxjQuery 警报框
【发布时间】：2010-07-13 21:52:19
【问题描述】：

有没有用 jQuery 设置警报的好方法？

我有一个 PDF 文件，在继续之前我需要我的访问者同意...

所以：用户点击 PDF 链接警告框打开：“您必须同意我们的声明，然后才能向您提供此 PDF” 我同意按钮（PDF 下载继续）/我不同意按钮（框关闭并显示原始页面）

这是最好的处理方法吗？

我应该使用对话框吗？

【问题讨论】：

标签： jquery dialog

【解决方案1】：

我建议使用模态确认对话框。它还融合了背景，使对话框更加突出。

文档在http://jqueryui.com/demos/dialog/#modal-confirmation下

【讨论】：

【解决方案2】：

在 MUCH 搞砸之后，我发现最好的方法是这是一种使用对话框 ui 模拟 javascript 本机警报的简单方法，如下所示（顺便说一下，我自己写的，因为可用的东西非常稀缺这个主题和很多人喋喋不休地谈论使用插件，制作一个多阶段的“这个”或令人讨厌的“那个”ZZZzzz......）：

注意：你不能真正做一个等价的 confirm() 函数 - 没有 fass 但你可以使用 html 丰富的警报并在 jQueryAlery() 调用结束时自己添加该丰富的 html 的事件.

它工作正常，包括一个可选的调试，用于“查看”html 或“url”（在后者的情况下）

function JQueryAlert(message,windowHeight){
    /****
     *  equivalent to javascript 'alert'
     */
    if (!windowHeight) var windowHeight = 470;

    $("#msgdialog").remove();

    $("body").append("<div id='msgdialog'></div>"); 

    thatmsg = $("#msgdialog");

    $("#msgdialog").dialog({
        resizable: false,
        draggable: false,
        width: 770,
        height: windowHeight,
        context: thatmsg,
        modal: true,
        autoOpen: false,
        buttons: {
            "Cancel" : function (){
                thatmsg.dialog("close");
            }/*,
            "View Source" : function (){
                alert($('<div>').append($(this).clone()).html());
            }*/
        }
    });     

    $("#msgdialog").html(message);
    $("#msgdialog").dialog('open');     
}

和上面一样，只是它从一个 url 获取内容

  function JQueryHTML(url,windowHeight){
    /****
     *  equivalent to javascript 'alert' but gets a url
     */

    if (!windowHeight) var windowHeight = 470;

    $("#dialog").remove();

    $("body").append("<div id='dialog'></div>"); 

    that = $("#dialog");

    $("#dialog").dialog({
        resizable: false,
        draggable: false,
        width: 770,
        height: windowHeight,
        context: that,
        modal: true,
        autoOpen: false,
        buttons: {
            "Cancel" : function (){
                that.dialog("close");
            }/*,
            "View Source" : function (){
                alert($('<div>').append($(this).clone()).html());
            },
            "View Url" : function (){
                alert(url);
            }*/
        }
    });     

    $.get(url, function(data) {
        $("#dialog").html(data);
        $("#dialog").dialog('open');
    });
}

编辑：

我用下面的PHP效果很好

   if ($_SESSION['alert_message']){
        echo "<script>\n";
        echo " $(function() { \n";
        echo "   JQueryMessage('".str_replace("'","\'",$_SESSION['alert_message'])."'); \n";
        echo " }); \n";
        echo "</script>\n";
        unset($_SESSION['alert_message']);
    }

【讨论】：

“你不能真正做一个等价的 confirm() 函数”——为了信息，下面的问题展示了一种相当不显眼的方式来实现一个与 jquery-ui 对话框等效的 confirm()： *.com/questions/8105556/…
不，我的意思是你不能 "if (confirm('yes no?')){ //do something;}"

【解决方案3】：

如果你想使用 Jquery Alert/Confirm/Prompt Box check out this example.

或者更好你应该使用 jquery 的弹出窗口。它看起来很适合一些 CSS。

$('#errorBtn').click(function(e) {
    if (acceptCondition()=='on'){
        // Prevents the default action to be triggered. 
        e.preventDefault();                
        // Triggering bPopup when click event is fired
        $('#popup').bPopup({
            opacity: 0.6,
            zIndex: 200,
            modalClose: false,
            positionStyle: 'fixed'
        });

您还必须包含 jquery.bpopup-0.7.0.min.js :)
你可以在这里dinbror.dk了解更多信息

【讨论】：