Search code examples
csssimplemodal

How can i modify the position CSS style property of my modal pop-up

I have this jquery bpopup momadal that i want to position relative to the co-ordinates of the mouse click. i am able to capture the cordinate and pass them to the style sheet or even when i code them explicitly the modal doesnt seem to support the possitioning property.

Please check out the JS fidle of the modal that i am using on this link: http://jsfiddle.net/24a9b/

#element_to_pop_up { 
    background-color:#fff;
    border-radius:15px;
    color:#000;
    display:none; 
    padding:20px;
    min-width:400px;
    min-height: 180px;
}
.bClose{
    cursor:pointer;
    position:absolute;
    right:10px;
    top:5px;
}

I want to use the "top" and "left" style properties. but it seems this modal has the center as a default writen in its library wich you can also check out on that link. Please any help will be highly appreciated.

Solution

  • The library which you have used to create this popup modal is setting the modal in center by calculating the top and left styles dynamically and then it applies them to the element in the form of inline css styles.

    Therefore, if you want to override the top and left to provide your own values, you can do this by giving your styles as !important.

    #element_to_pop_up { 
    left: 10px !important;
    top:10px  !important;
}

    Updated JSFiddle: https://jsfiddle.net/24A9b/13946/