Tap object show pop up

Help & Support
#1

hey guys,

can playcanvas pop up when we click on objects like modal boxes?

#2

For modals, you’ll be best off integrating HTML/CSS UI into PlayCanvas(guide for that here), and then using the same JS/jQuery syntax you normally use to make the modal show.

Side note: If you are using external scripts(not stylesheets), eg jQuery, add their CDNs to PlayCanvas by going to your project settings and then External Scripts.

1 Like
#3

when i try to my code this happen

Cannot read property ‘resource’ of null

#4

Hi @Unavailable! Can you share a link of your project?

#5

here’s my project https://playcanvas.com/editor/scene/1138630

#6

Hi @Unavailable,

The problem was that you had two entities with the ui script, one that was parsed, and one that was not. Therefore, the one that was not parsed couldn’t get the resource of your CSS, since it didn’t exist. Simply removing the extra, non-parsed entity did the trick, and the error is now gone - https://playcanvas.com/project/790308.

2 Likes
#7

ahh thanks I don’t see that I have 2 entities.

but why my modalbox doesn’t appear, is there anything missing?

#8

why i can’t do this function

Modal.prototype.bindEvents = function() {
    this.app.root.findByName('Info').on('click', function (event) {
    document.getElementById("modals").style.display = "none";
    }, this);

};
#9

Hi @Unavailable,

Looking at your project, the Info entity does not fire the click event. You will have to go down another level into the button component:

Modal.prototype.bindEvents = function() {
    this.app.root.findByName('Info').button.on('click', function (event) {
    document.getElementById("modals").style.display = "none";
    }, this);

};
1 Like
#10

what should i add? please help i’m stuck :sweat_smile:

#11

Hi @Unavailable,

If you look right after

this.app.root.findByName('Info')

You’ll see that I added .button. That will bind click to the right place. I hope that is helpful.

1 Like
#12

thank you it working