Question

我想以编程方式显示叠加层。我试图修改此示例Opening overlays programmatically中的代码。如本例所示，我只想在文档加载时加载一次叠加层，而不是每次用户点击按钮时都显示叠加层。问题是仅在第一次点击时加载叠加层。对于后续点击同一按钮

，它不会打开

这是我的代码。

<html>

<head>
    <title>jQuery Tools standalone demo</title>


    <script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/standalone.css"/>   
    <style>
        #facebox {


            display:none;


            width:400px;
            border:10px solid #666;


            border:10px solid rgba(82, 82, 82, 0.698);


            -moz-border-radius:8px;
            -webkit-border-radius:8px;
        }

        #facebox div {
            padding:10px;
            border:1px solid #3B5998;
            background-color:#fff;
            font-family:"lucida grande",tahoma,verdana,arial,sans-serif
        }

        #facebox h2 {
            margin:-11px;
            margin-bottom:0px;
            color:#fff;
            background-color:#6D84B4;
            padding:5px 10px;
            border:1px solid #3B5998;
            font-size:20px;
        }
    </style>
    <script>

        var overlayDiv=function(){ 
             $("#facebox").overlay({
                api: true,  
                top: 260,
                mask: {
                    color: '#fff',
                    loadSpeed: 200,
                    opacity: 0.5
                },
                closeOnClick: false,
                load: true
            })
        };
        $(document).ready(function() {    
            $("#triggerBtn").click(function(){
                console.log(" I have been CLICKED");
                overlayDiv();
            });

        });
    </script>

<body>

    <button id="triggerBtn"> Trigger Overlay</button>
    <div id="facebox">
        <div>
            <h2>Facebox</h2>
            <p>
        This dialog is opened programmatically when the page loads. There is no need for a trigger element.
            </p>

            <form>
                <input type="file" />

            </form>

            <p style="color:#666">
        To close, click the Close button or hit the ESC key.
            </p>


            <p>
                <button class="close"> Close </button>

            </p>
        </div>

    </div>




</body>

Answer 1

这应该适合你。

$("#triggerBtn").click(function(){
    console.log(" I have been CLICKED");
    $('#facebox').data('overlay').load();
});

此处提供更多信息 - Jquery Tools Overlay Scripting API

Answer 2

这对我有用......我在jQuery Tools论坛上找到了这个方法，似乎是我现在能找到的最好的方法。

<script>
function popup() {
if ($("#facebox").hasClass("init")) {
    $("#facebox").overlay().load();
}
else {
    $("#facebox").addClass("init");
    $("#facebox").overlay({

     // custom top position
     top: 260,

     mask: { color: '#838383',
         loadSpeed: 200,
         opacity: 0.5
     },  
     closeOnClick: true,
     load: true
    });
}
}
</script>

Answer 3

简化：

var overlay;

function overlayDiv()
{
    if (typeof overlay === 'undefined')
        overlay = $('#facebox').data('overlay').load();
    else
        overlay.load();

}

Answer 4

您应该使用：

$(".overlay").remove();

如何以编程方式使用Jquery工具覆盖？

4 个答案: