Question

如果你转到http://www.sherwin-williams.com/painting-contractors/project-solutions/residential-repaints/facility-illustration-guides/，你会发现当你点击'+'时会弹出一个叠加层。我很好奇他们是如何完成这一切的，所以我下载了源代码并决定玩它。

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

Answer 1

要在点击时显示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" );
            }               
        }
    });
});

Answer 2

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

您可以使用@didilio发布的jquery示例。但是因为你需要14个弹出窗口，所以它会变得混乱。

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

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

查看free one，这是其中最好的之一。

或者，看看这个paid one，它也是最好的那个。

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

Answer 3

正如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（）。

如何启用叠加层以在网页上弹出，具体取决于我点击的项目？

3 个答案: