CODEWITHSUNDEEP
jquerycsssimplemodal
esoteric
esoteric

Reputation: 125

Simple modal relative to container div

I am using simplemodal (www.ericmmartin.com/projects/simplemodal/) in multiple locations for a site. I need to set some of these relative to the copy container div 1000px. Is this possible? Or can they only be set to the body?

Upvotes: 2

Views: 8577

Answers (2)

Matthew Cox
Matthew Cox

Reputation: 13672

As long as your simplemodal html element is a child of a container, and said container has relative or absolute positioning then you can pull it off.

http://www.w3schools.com/cssref/pr_class_position.asp

Edit: Since your real goal is custom positioning. Just utilize the ability the dev provided in the library to manually position the modal. This is taken straight out of the documentation.

// Manually set position using percentages
$("#sample").modal({position: ["50%","50%"]});

In order to position it correctly, you just need to get the offset of the element you want to position over, above, below, adjacent to etc... and perform the simple math and then call set the position as demonstrated above.

You can get the offset of any element like so:

var os = $('#selector').offset();
var top = os.top;
var left = os.left;

http://api.jquery.com/offset/

The offset is relative to the entire document so it will serve your fixed positioning needs well I believe.

Upvotes: 1

Jemaclus
Jemaclus

Reputation: 2376

This answer isn't specific to simplemodal, but rather a general CSS rule. If the parent container is position:relative, then the children can be positioned relative to the parent. Example:

     <div style="position: relative;">
          <div style="position: absolute; top: -100px; left: -100px;">
               This div is 100 pixels up and left of the parent div
          </div>
     </div>

Hope that helps. Good luck.

Upvotes: 1

Related Questions