0

如果您访问http://www.sherwin-williams.com/painting-contractors/project-solutions/residential-repaints/facility-illustration-guides/，您会注意到，当您单击“+”时，会弹出一个叠加层向上。我很好奇他们是如何完成这项工作的，所以我下载了源代码并决定尝试一下。

我能够在此处重新创建网页 ( http://residentialrepaint.com/repaints.php )，但我注意到叠加层不起作用。我尝试挖掘我认为问题所在的 jquery-ui.min.js 文件，但该文件非常大并且难以挖掘。我想也许文件没问题，但有一些链接错误。有谁知道如何让这个工作，以及问题出在哪里，以便我可以更好地了解叠加层是如何工作的？

4

3 回答 3

2

为了让 jQuery UI 覆盖出现在点击我会做这样的事情......

var $dialog = $('<div id="dialog" title="Dialog Title">Dialog Text</div>');

$('#buttonID').click( function() {

    $dialog.dialog({
        resizable: true,
        modal: true,
        buttons: {
            "Ok": function () {
                $( this ).dialog( "close" );
            }               
        }
    });
});
于 2013-07-11T06:40:51.487 回答
0

下载源代码总是一个坏主意，需要大量工作。

您可以使用 @didilioo 发布的 jquery 示例。但既然你需要 14 个弹出窗口，那么它会变得一团糟。

我建议你使用一个 jquery 插件来帮助你，有很多插件可以帮助你弹出一个弹出窗口，有些是免费的，有些需要一些钱。

一个 jquery 插件做了什么，它包含了弹出弹出窗口所需的所有代码。这些插件中的大多数还具有可定制性选项，可以帮助您制作适合您需求的弹出窗口。

看看这个免费的，它是最好的之一。

或者，看看这个付费的，它也是最好的。

网站中提供了有关如何设置这些插件的其他说明。

于 2013-07-11T06:50:25.557 回答
0

正如 Digiliooo 所说，JQuery Dialog 是两种显而易见的方法之一。

另一种是只显示一个绝对定位的 div.. 这在 UI 设计和格式方面更加灵活。

<button id='launcher' type='button' onclick='showPopup'>Show</button>
<div id='popup' style='display:hidden; position:absolute; border:#808080 2px solid;'>
    Here's the Big Popup
    <img src='big image.jpg'>
    Lots of text <p>
    Whatever formatting &amp; styling you want.
</div>

<script type='text/javascript'>
    function showPopup() {
        var popup = $('#popup');
        var nextTo = $('#launcher'); 
        popup.show();
        popup.position( 
            my: "left top",
            at: "right bottom",
            offset: "-30 0",    
            of: nextTo,
            collision: "flip"
        });
    }
</script>

关键要求是在调用 show( )之后调用 position()。

于 2013-07-11T06:51:50.923 回答