Error: TypeError: this.blocker is undefined

[mdmoura]

Hello,

I added the modal and associated it to a link.
When I click the link the modal opens and I am able to close it.

However, when I click the link again to open the modal a second time I get:

Error: TypeError: this.blocker is undefined
Source File: http://localhost:2660/lab/scripts/jquery.modal.js
Line: 100

Line 100 is "this.blocker.remove();"

Is this a bug?

Thank You,
Miguel

[kylefox]

Please post a publicly viewable example demonstrating the problem — thanks!

[mdmoura]

Here it is: http://codepen.io/mdmoura/pen/wmtlf

I tested it in Firefox and when I click the open button for the second time I get the error:

Error: TypeError: this.blocker is undefined
Source File: http://kylefox.ca/jquery-modal/jquery.modal.min.js
Line: 7

There is something else strange: I have showClose: false but the close button is still generated by Modal.

So I keep ending with two close buttons on the modal ... Am I missing something?

[kylefox]

Here's a fixed version of your example: http://codepen.io/anon/pen/vyquB

The problem stems from the same issue as the other issue you posted — you can't use both rel="modal:open" and manually open a modal with JavaScript. You need to use one or the other. That was why you couldn't open the modal twice, and it's also why the close button was still appearing.

[mdmoura]

Got it ... A suggestion: why not use CSS to define the opacity, color and z-indez of the overlay?

I think it is easier to integrate that into the projects as sometimes variables are used for colors (skins) and z-indexes (to organize the z-index order of various elements)

[kylefox]

I went with CSS because I wanted as much functionality included in the Javascript as possible so that there was minimal external CSS required. But it's not a bad idea using pure CSS.

[mdmoura]

IMHO, pure CSS is better because the styling is separated and it is easier to adapt to every project.

When I read "Most plugins I've found try to do too much, ..." I decided to use your plugin.

What is missing is pure CSS ... IMHO I would remove overlay, opacity and zIndex from the plugin.
I would add to a .Overlay CSS class and would allow to change the class name on the plugin options.

And if this was my work I would even remove the auto generated Close button, so closeText and showClose.

I would remove because your solution "< a href="#close" rel="modal:close" >Close window< /a >" is really elegant and so easy to implement so why having an option to auto generate a close button when its placement in the markup will be useless most of the time? The close button is placed at the end of the modal window ... Most of times it is used a cross on top right.

Well, but this is just my idea ... I tend to use and develop simple plugins ...

They are the only ones that can adapt to projects which can vary a lot.