Как использовать инструменты Jquery Overlay программно? - PullRequest
Новая
       44

Как использовать инструменты Jquery Overlay программно?

2 голосов
/ 16 августа 2011

Я хочу показать оверлей программно. Я попытался изменить код в этом примере Открытие оверлеев программным способом . Вместо того, чтобы загружать оверлей только один раз при загрузке документа, как показано в этом примере, я хочу показать оверлей каждый раз, когда пользователь нажимает кнопку. Проблема в том, что оверлей загружается только для первого клика. Не открывается при последующих нажатиях на одну и ту же кнопку

Вот мой код. 

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

Ответы [ 4 ]

2 голосов
/ 02 сентября 2011

Это должно помочь вам. 

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

Более подробная информация здесь - API сценариев наложения Jquery Tools

1 голос
/ 08 января 2013

Упрощение: 

var overlay;

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

}
1 голос
/ 26 апреля 2012

Это работает для меня ... Я нашел этот метод на форуме 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>
0 голосов
/ 13 октября 2013

Вы должны использовать: 

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