Position .x-modal-close with jQuery?

Support
#1

Hi guys :slight_smile:

I know there must a simple way with jQuery to position a #cart-modal-element's .x-modal-close at just inside the top-right of the modal itself (.x-modal-bg) rather than the top-right of the entire screen. Using CSS to position: absolute the .x-modal-close doesn’t work unfortunately, because the cart itself changes size as items are added/removed, so that anywhere you place it initially will look bad once the modal is in use. Unfortunately if I do leave it at the top-right of the screen, users I’ve tested my store on are clicking the x's of products to try and close the cart modal :sweat_smile: but of course are removing their products instead.

From googling I can see that the solution must be something simple like the below code, but as I know next to nothing about jQuery I’m getting caught up in trial and error and the x hasn’t moved as yet, unfortunately.

Any ideas would be appreciated…!

$( "#position1" ).position({
  my: "center",
  at: "center",
  of: "#targetElement"
});
#2

Hi there,

Please kindly add the Javascript code below to Pro > Launch > Theme Options > JS:

jQuery('.x-modal-close').insertBefore('.x-mini-cart');

Thank you.

1 Like
#3

Super…! Thanks a lot!! I knew it would be simple, but I never would have found that method, I don’t think.

I’ve managed to offset it slightly using position: relative, so that’s great.

Thanks again…!

#4

Hi again. Sorry, although I’ve given it a slight offset using CSS (position: relative; right:14px) - in FireFox browser, the click will only register at the default jQuery('.x-modal-close').insertBefore('.x-mini-cart') position. Can you tell me how to pass the slight offset via jQuery as well? Thanks.

#5

Hello there,

You can add this code to Pro > Launch > Theme Options > JS:

jQuery('.x-modal-close').insertBefore('.x-mini-cart').css({"position":"relative", "right": "14px"});

Hope it helps.

#6

Brilliant, thanks.

#7

You’re welcome!
We’re glad we were able to help you out.

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.