javascript Jquery 弹出框

Jquery Popup Box

提问by Andrue

I'm new to JavaScript and Jquery. I googled Jquery pop-up examples online. I want the message to say "Our website is not yet complete, but feel free to browse what we have." I'll include the code example I found, but it looks really weird. I'm not sure what the name of the function is and how to execute it using the window.onload = function(); code. I also want to have a button 'close' that closes the text box. Here'a what it should look like: http://demo.tutorialzine.com/2010/12/better-confirm-box-jquery-css3/

我是 JavaScript 和 Jquery 的新手。我在网上搜索了 Jquery 弹出示例。我希望消息显示“我们的网站尚未完成，但请随时浏览我们拥有的网站”。我将包括我找到的代码示例，但它看起来很奇怪。我不确定该函数的名称是什么以及如何使用 window.onload = function(); 执行它。代码。我还想要一个关闭文本框的按钮“关闭”。这是它应该是什么样子：http://demo.tutorialzine.com/2010/12/better-confirm-box-jquery-css3/

Here's the first part:

这是第一部分：

    (function($){

    $.confirm = function(params){

        if($('#confirmOverlay').length){
            // A confirm is already shown on the page:
            return false;
        }

        var buttonHTML = '';
        $.each(params.buttons,function(name,obj){

            // Generating the markup for the buttons:

            buttonHTML += '<a href="#" class="button '+obj['class']+'">'+name+'<span></span></a>';

            if(!obj.action){
                obj.action = function(){};
            }
        });

        var markup = [
            '<div id="confirmOverlay">',
            '<div id="confirmBox">',
            '<h1>',params.title,'</h1>',
            '<p>',params.message,'</p>',
            '<div id="confirmButtons">',
            buttonHTML,
            '</div></div></div>'
        ].join('');

        $(markup).hide().appendTo('body').fadeIn();

        var buttons = $('#confirmBox .button'),
            i = 0;

        $.each(params.buttons,function(name,obj){
            buttons.eq(i++).click(function(){

                // Calling the action attribute when a
                // click occurs, and hiding the confirm.

                obj.action();
                $.confirm.hide();
                return false;
            });
        });
    }

    $.confirm.hide = function(){
        $('#confirmOverlay').fadeOut(function(){
            $(this).remove();
        });
    }

})(jQuery);

Here's the second part:

这是第二部分：

$(document).ready(function(){

    $('.item .delete').click(function(){

        var elem = $(this).closest('.item');

        $.confirm({
            'title'     : 'Delete Confirmation',
            'message'   : 'You are about to delete this item. <br />It cannot be restored at a later time! Continue?',
            'buttons'   : {
                'Yes'   : {
                    'class' : 'blue',
                    'action': function(){
                        elem.slideUp();
                    }
                },
                'No'    : {
                    'class' : 'gray',
                    'action': function(){}  // Nothing to do in this case. You can as well omit the action property.
                }
            }
        });

    });

});

            $(markup).hide().appendTo('body').fadeIn();

            var buttons = $('#confirmBox .button'),
                i = 0;

            $.each(params.buttons,function(name,obj){
                buttons.eq(i++).click(function(){

                    // Calling the action attribute when a
                    // click occurs, and hiding the confirm.

                    obj.action();
                    $.confirm.hide();
                    return false;
                });
            });
        }

        $.confirm.hide = function(){
            $('#confirmOverlay').fadeOut(function(){
                $(this).remove();
            });
        }

    })(jQuery);

EDIT: I got the message to show up on loading. I changed the code in the second part to

编辑：我收到了在加载时显示的消息。我将第二部分中的代码更改为

$('.item .delete').ready(function(){

$('.item .delete').ready(function(){

回答by Ragesh S

Dialog window like, please see this image :

对话框窗口，请看这张图片：

And please check this example: http://www.ericmmartin.com/projects/simplemodal/

请检查这个例子：http: //www.ericmmartin.com/projects/simplemodal/

There is various types of pop models: http://www.ericmmartin.com/projects/

流行模特有多种类型：http: //www.ericmmartin.com/projects/

And coding samples: http://www.ericmmartin.com/projects/simplemodal/#examples

和编码示例：http: //www.ericmmartin.com/projects/simplemodal/#examples

回答by Talha Ahmed Khan

Put this on the page.

把这个放在页面上。

Make sure that the first partof your question is also included.

确保first part您的问题也包括在内。

It will make a dialog box on the page center with a message and with a close button.

它将在页面中心创建一个带有消息和关闭按钮的对话框。

Also you can change the Heading, I just added a placeholder.

您也可以更改标题，我只是添加了一个占位符。

$(document).ready(function(){
  $.confirm({
    'title'     : 'Heading Goes Here',
    'message'   : 'Our website is not yet complete, '
                  + 'but feel free to browse what we have.',
    'buttons'   : {
        'Close'   : {
          'class' : 'blue',
          'action': function(){}  // Nothing to do in this case.
        }
    {
  });

});