search

soundasleep / jquery-dropdown

Bootstrap-style dropdowns with some added features and no dependencies.
Other
767 stars 268 forks source link

CSS Collision? #107

Closed ajmccann11t closed 8 years ago

ajmccann11t commented 8 years ago

Why would this simple modal CSS break JQ?

JQ works when I delete the lines in "CSS for Modal Popup"...

Thank you for any help/guidance...

    /* CSS for Modal Popup */

.modalDialog { position: fixed; font-family: Arial, Helvetica, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.8); z-index: 99999; opacity:0; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; pointer-events: none; }

.modalDialog:target { opacity:1; pointer-events: auto; }

.modalDialog > div { width: 400px; position: relative; margin: 10% auto; padding: 5px 20px 13px 20px; border-radius: 10px; background: #fff; background: -moz-linear-gradient(#fff, #999); background: -webkit-linear-gradient(#fff, #999); background: -o-linear-gradient(#fff, #999); }

.close { background: #606061; color: #FFFFFF; line-height: 25px; position: absolute; right: -12px; text-align: center; top: -10px; width: 24px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; }

.close:hover { background: #00d9ff; }

    /* CSS for JQ DropDown */

.jq-dropdown { position: absolute; z-index: 1039; display: none } .jq-dropdown .jq-dropdown-menu, .jq-dropdown .jq-dropdown-panel { min-width: 160px; max-width: 360px; list-style: none; background: #fff; border: solid 1px #ddd; border-radius: 4px; box-shadow: 0 5px 10px rgba(0, 0, 0, .2); overflow: visible; padding: 4px 0; margin: 0 } .jq-dropdown .jq-dropdown-panel { padding: 10px } .jq-dropdown.jq-dropdown-tip { margin-top: 8px } .jq-dropdown.jq-dropdown-tip:before { position: absolute; top: -6px; left: 9px; content: ''; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid #ddd; display: inline-block } .jq-dropdown.jq-dropdown-tip:after { position: absolute; top: -5px; left: 10px; content: ''; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #fff; display: inline-block } .jq-dropdown.jq-dropdown-tip.jq-dropdown-anchor-right:before { left: auto; right: 9px } .jq-dropdown.jq-dropdown-tip.jq-dropdown-anchor-right:after { left: auto; right: 10px } .jq-dropdown.jq-dropdown-scroll .jq-dropdown-menu, .jq-dropdown.jq-dropdown-scroll .jq-dropdown-panel { max-height: 180px; overflow: auto } .jq-dropdown .jq-dropdown-menu li { list-style: none; padding: 0 0; margin: 0; line-height: 18px } .jq-dropdown .jq-dropdown-menu label, .jq-dropdown .jq-dropdown-menu li>a { display: block; color: inherit; text-decoration: none; line-height: 18px; padding: 3px 15px; margin: 0; white-space: nowrap } .jq-dropdown .jq-dropdown-menu label:hover, .jq-dropdown .jq-dropdown-menu li>a:hover { background-color: #f2f2f2; color: inherit; cursor: pointer } .jq-dropdown .jq-dropdown-menu .jq-dropdown-divider { font-size: 1px; border-top: solid 1px #e5e5e5; padding: 0; margin: 5px 0 }

ajmccann11t commented 8 years ago

Sorry - never mind.

I moved the html that uses this CSS to the end of the html file (after JQ stuff) and all is well.

Really didn't want to give up JQ!