关于每当具有特定路径/文件名的链接时打开灯箱的问题

发布于 2024-11-19 16:33:40 字数 2581 浏览 0 评论 0原文

我正在开发的网站有链接和按钮，使用户能够编辑演示文稿。

每当您进入编辑页面时，客户希望打开一个带有通知窗口的灯箱。

我将以下页面拉入主页以尝试完成此操作。

通知将返回或继续编辑演示文稿。

我的主要问题是，当有链接或按钮链接到包含特定路径/文件名的网址时，如何打开灯箱。我想我已经很接近了，但无法弄清楚我到底错过了什么。这是我到目前为止所拥有的。

如果您也知道如何回答继续问题，那么您将成为我的新英雄:)。

    $(document).ready(function(){

    function() {
        if ( document.location.href.indexOf('slidecreate/editor/') >=0) {
                    $('.open').click(function(){
                    $('.notifylightbox, .notifybox').animate({'opacity':'.50'}, 300, 'linear');
                    $('.notifybox').animate({'opacity':'1.00'}, 300, 'linear');
                    $('.notifylightbox, .notifybox').css('display', 'block');
                });

                $('.notifyback').click(function(){
                    close_box();
                });

                $('.notifylightbox').click(function(){
                    close_box();
                });
                }<!--endif-->
            });<!--endifstartfunction-->


            function close_box()
            {
                $('.notifylightbox, .notifybox').animate({'opacity':'0'}, 300, 'linear', function(){
                    $('.notifylightbox, .notifybox').css('display', 'none');
                });
            }<!--endclosebox-->
 });<!--enddocready-->

<style>
.notifylightbox {
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background: url("../img/dashboard/lightboxbg.png");
    z-index:50;
    display:none;
}

.notifybox {
    background: url("../img/dashboard/noticebg.png") no-repeat;
    margin: -100px auto auto auto;
    width: 495px;
    height: 220px;
    display: none;
    position:absolute;
    z-index:51;
}

.notifyback {
    position: relative;
    left: 295px;
    width: 84px;
    height: 18px;
    top: 125px;
}

.notifycontinue {
    position: relative;
    left: 302px;
    width: 84px;
    height: 18px;
    top: 125px;
    }


</style>
</head>






<body>
    <div class="notifylightbox"></div>
        <div class="notifybox">
        <p style="width: 300px; position: relative; top: 95px; left: 150px;">Your custom edited presentation will be saved to your user space and will not modify any base templates.</p>
            <img class="notifyback" src="../img/dashboard/noticeback.png" />
            <img class="notifycontinue" src="../img/dashboard/noticecontinue.png" />
        </div>
    </body>
    </html>

原文

The site I'm working on has links and buttons that give users the ability to edit a presentation.

The client wants to open a light box with a notification window whenever you're going to an edit page.

I'm pulling in the following page to the main page to try to accomplish this.

The notification would either go back, or continue to the edit the presentation.

The main question I have is how to open a light box whenever there is a link or a button which links to a url containing a certain path/filename. I think I'm close, but can't figure out exactly what I'm missing. Here's what I have so far.

If you know how to answer the continue question as well, then you'd be my new hero :).

    $(document).ready(function(){

    function() {
        if ( document.location.href.indexOf('slidecreate/editor/') >=0) {
                    $('.open').click(function(){
                    $('.notifylightbox, .notifybox').animate({'opacity':'.50'}, 300, 'linear');
                    $('.notifybox').animate({'opacity':'1.00'}, 300, 'linear');
                    $('.notifylightbox, .notifybox').css('display', 'block');
                });

                $('.notifyback').click(function(){
                    close_box();
                });

                $('.notifylightbox').click(function(){
                    close_box();
                });
                }<!--endif-->
            });<!--endifstartfunction-->


            function close_box()
            {
                $('.notifylightbox, .notifybox').animate({'opacity':'0'}, 300, 'linear', function(){
                    $('.notifylightbox, .notifybox').css('display', 'none');
                });
            }<!--endclosebox-->
 });<!--enddocready-->

<style>
.notifylightbox {
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background: url("../img/dashboard/lightboxbg.png");
    z-index:50;
    display:none;
}

.notifybox {
    background: url("../img/dashboard/noticebg.png") no-repeat;
    margin: -100px auto auto auto;
    width: 495px;
    height: 220px;
    display: none;
    position:absolute;
    z-index:51;
}

.notifyback {
    position: relative;
    left: 295px;
    width: 84px;
    height: 18px;
    top: 125px;
}

.notifycontinue {
    position: relative;
    left: 302px;
    width: 84px;
    height: 18px;
    top: 125px;
    }


</style>
</head>






<body>
    <div class="notifylightbox"></div>
        <div class="notifybox">
        <p style="width: 300px; position: relative; top: 95px; left: 150px;">Your custom edited presentation will be saved to your user space and will not modify any base templates.</p>
            <img class="notifyback" src="../img/dashboard/noticeback.png" />
            <img class="notifycontinue" src="../img/dashboard/noticecontinue.png" />
        </div>
    </body>
    </html>

分享到QQ

分享到微博

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

发布评论

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

最舍不得你 2024-11-26 16:33:40

使用 contains 选择器

$('a[*="/piece/of/url/youre/looking/for"]').click(function (e) {

    //...show your lightbox/dialog here...

    //to stop browser from following clicked link, return false:
    return false; 
});

因为您已经在使用 JQuery，所以可能想要使用 JQuery UI 对话框而不是自定义确认框。

Use contains selector

$('a[*="/piece/of/url/youre/looking/for"]').click(function (e) {

    //...show your lightbox/dialog here...

    //to stop browser from following clicked link, return false:
    return false; 
});

Since you're already using JQuery you might want to use JQuery UI Dialog box instead of custom confirmation box.

回复收藏 0 原文

~没有更多了~