SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    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:
    Code:
    #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:
    Code:
      <script>
      $(function() {
        $( "#dialog-modal" ).dialog({
          height: 250,
          modal: true,
         maxWidth: 50,
    	    });
    	$("body").on( "click", ".ui-widget-overlay", function() {
    	$("#dialog-modal").dialog( "close" );
    	});
    							
      });
      </script>

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Off Topic:

    Quote Originally Posted by Paul O'B View Post
    If you remove it then keyboard users won't be able to follow the link
    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.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •