In Need of Help Styling a Modal

My page can be seen here:

http://www.sipesandson.com/indexfade.html

What is causing the blue box to appear around the Angie’s List Badge logo? I had use their script instead of just an image due to their rules.

Also, if anyone knows how to make the modal close by clicking out side it, I would appreciate your help.

Thank you so much!

HI,

The blue box (in chrome) is the focus outline and is an accessibility aid for keyboard users to show what is in focus. If you remove it then keyboard users won’t be able to follow the link that is around that image very easily.

It can be removed with:


#dialog-modal a{outline:none}

Usually you don’t want to mess with focus styles as I said above.

Also, if anyone knows how to make the modal close by clicking out side it, I would appreciate your help.

That’s really a JS question but I think something like this should work. Add the part shown in bold:


  <script>
  $(function() {
    $( "#dialog-modal" ).dialog({
      height: 250,
      modal: true,
     maxWidth: 50,
	    });
[B]	$("body").on( "click", ".ui-widget-overlay", function() {
	$("#dialog-modal").dialog( "close" );
	});[/B]
							
  });
  </script>
  

Off Topic:

Hehe, that’s if they can get to the link via the keyboard in the first place, which is often a herculean (if not impossible) task with a lot of these modal features.