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

发布于 2024-11-30 09:48:32 字数 2668 浏览 2 评论 0原文

我想以编程方式显示叠加层。我尝试修改此示例中的代码以编程方式打开叠加层。我不想像本示例中所示在文档加载时仅加载一次覆盖层，而是希望在用户每次单击按钮时显示覆盖层。问题是覆盖层仅在第一次单击时加载。随后单击同一按钮时不会打开它

这是我的代码。

<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>

原文

I wan to show an overlay programmatically. I tried to modify the code in this example Opening overlays programmatically. Instead of loading the overlay only once upon document load as shown in this example, I want to show the overlay everytome a user clicks the button. The problem is thatthe overlay is loaded only for the first click. It does not open for the subsequent clicks on the same button

Here is my code.

<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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

甲如呢乙后呢 2024-12-07 09:48:32

这应该对你有用。

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

更多信息请点击此处 - Jquery 工具覆盖脚本 API

This should do the trick for you.

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

More information here - Jquery Tools Overlay Scripting API

回复收藏 0 原文

孤独患者 2024-12-07 09:48:32

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

<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>

This is working for me... I found this method on the jQuery Tools forum and seems to be the best I can find for now.

<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>

回复收藏 0 原文

坚持沉默 2024-12-07 09:48:32

简化：

var overlay;

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

}

Simplify:

var overlay;

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

}

回复收藏 0 原文