Вопрос об открытии лайтбокса, когда ссылка с определенным путем / именем файла - PullRequest
Новая
       1

Вопрос об открытии лайтбокса, когда ссылка с определенным путем / именем файла

1 голос
/ 14 июля 2011

Сайт, над которым я работаю, имеет ссылки и кнопки, которые дают пользователям возможность редактировать презентацию.

Клиент хочет открыть лайтбокс с окном уведомлений всякий раз, когда вы идете на страницу редактирования.

Я пытаюсь выполнить эту задачу на следующей странице на главной странице.

Уведомление либо вернется назад, либо продолжит редактирование презентации.

Главный вопрос, который у меня возникает, - как открыть лайтбокс, когда есть ссылка или кнопка, которая ссылается на URL, содержащий определенный путь / имя файла. Я думаю, что я близко, но не могу понять, чего именно мне не хватает. Вот что у меня есть.

Если вы знаете, как ответить и на вопрос продолжения, то вы станете моим новым героем :). 

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

1 Ответ

0 голосов
/ 14 июля 2011

Использование 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 вместо пользовательского поля подтверждения.

...