CODEWITHSUNDEEP
javascriptjqueryhtml
user3052886
user3052886

Reputation: 80

How to use the .click function with overlay?

I am trying to use the .click function with the overlay from jQuery tools, but it is not working.

HTML:

<p id="click">Clikc here:</p>
<div class="pop">
  <div>
    <p>some text here</p>
  </div>
</div>

jQuery function:

 $( "#click" ).click(function(){
 $( ".pop" ).overlay({
     top: 10,
     mask: {color:'#595959',loadSpeed: 1000,opacity: 0.5},
     closeOnClick: false,
     api: true
 });

I have already added the (document).ready at the top. I want the overlay to pop up when the user clicks the text.

Upvotes: 0

Views: 219

Answers (2)

user3052886
user3052886

Reputation: 80

I have found the problem. The problem is in the jQuery tools version 1.2.5, it seems as if the overlay is not a method and also in the 1.2.6. What I had to do is use the version 1.2.7 and it worked. I loaded it right after my original jQuery.

<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src=""http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js""></script>

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

You need to separate the code to 2 operations, 1. Define the overlay, 2. programarically launch the overlay. See this demo

jQuery(function () {
    $("#click").click(function () {
        $(".pop").overlay().load();
    });

    $(".pop").overlay({
        top: 10,
        mask: {
            color: '#595959',
            loadSpeed: 1000,
            opacity: 0.5
        },
        closeOnClick: false,
        api: true
    });
})

Demo: Fiddle

Upvotes: 1

Related Questions