jQuery simplemodal closeHTML issue

Question

I'm having an issue where when initializing a modal window using the jquery.simplemodal plugin.

With no closeHTML option, the modal window is formatted properly.

$.modal(html, {});

However, if I specify closeHTML, the modal window is formatted to fit in nearly a 10x10 pixel square with scrollbars.

$.modal(html, {
    closeHTML: '<a href="#close">Close</a>',
});

Has anyone run into this issue and have any idea for a fix?

Relevant specs are:

• Chrome8 on Ubuntu x86_64
• jQuery 1.4.4
• jquery.simplemodal 1.4.1

Answer 1

This problem is solved by adding a closeClass w/ some CSS:

JS:

$.modal(html, {
  closeHTML: '<a href="#">close</a>',
  closeClass: 'acme-modal-close'
});

CSS:

.acme-modal-close{
  display: inline;
  z-index: 3200;
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
}

Answer 2

I was able to work around this issue. I just removed the text from the <a class="modal-close">Close</a> and went with <a class="modal-close"></a> and a css background image. So really, if you want to use text in your <a>, like "x" or "close" this doesn't solve your problem, it just avoids the bug. Maybe this helps Eric spot the issue.

• jQuery 1.4.4
• jquery.simplemodal.1.4.1