aroc / bootstrap-scroll-modal Goto Github PK

I've tested it on your example by entering a lot of breaks before the "Launch dynamic height demo modal" button. Basically, I don't want to lose the place on the page when the modal is launched. Firefox 11.0 skips to the top of the page. Not able to replicate with Chrome 19.0 (it keeps it's position).

Edit: I suspect this code is causing the problem:

$('html').css({ 'overflow' : 'hidden' })

http://stackoverflow.com/questions/8400984/page-shifts-up-when-overflowhidden-css-property-is-set-to-html-tag-only-in-fi

I have some bootstrap code that opens a modal as normal. When I drop in your JS and CSS (no other changes), the modal becomes about 80% opaque when opened. It appears to be something in your JS causing it since commenting out the CSS doesn't fix it.

With a dynamic modal (clicking on the backdrop hides the modal), clicking to the right of the modal does not dismiss the modal.

The issue is that the .modal-wrapper div extends from the middle of the page to the right hand side. Clicks on the right are registered to the .modal-wrapper div, not .modal-backdrop.

Fix is probably to add a listener for clicks on .modal-wrapper as well.

Jquery UI datetime picker is not showing up when used inside the modal pop up.

Any chance you would considering merging the project with https://github.com/jschr/bootstrap-modal ?
That would actually be awesome!

I believe the prependTo
this.$element.prependTo(this.$backdrop)

  function backdrop(callback) {
...
      } else {
        this.$element.prependTo(this.$backdrop)
        .delegate('[data-dismiss="modal"]', 'click.dismiss.modal', $.proxy(this.hide, this))
      }

or is something bizarre happening to the events handlers associated due to the moving of the .modal around w/in the DOM

function removeBackdrop() {
    this.$element.insertAfter(this.$backdrop)
    this.$backdrop.remove()
    this.$backdrop = null
    $('body').css({ 'overflow' : 'auto' })
}

If the backdrop option is set to false, the modal no longer renders as dynamic. It looks exactly like the regular fixed height modal instead.

It's due to the fact that the .modal-wrapper gets appended to the backdrop, so without it, it's just a regular modal.

Modal dialogs flash visible for an instant on the initial load of a page.

One way to solve it would be to use display: none; on the .modal-backdrop CSS and then set it to display: block; using JS when the dialog is triggered.

Hello,

I was having issues with IE9 the background causing a strange repeating text issue, and on IE8/7 The background is completely black. Placing the following code in your head code wraped in an IE conditional statement resolves this issue:

<style type="text/css">
    .modal-backdrop.fade.in { 
       background:transparent;
       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#D5000000,endColorstr=#D5000000);
       zoom: 1;
    } 
    </style>

From:
http://css-tricks.com/rgba-browser-support/

When the bootstrap-transitions.js file is linked and the fade class is added to the modal, the backdrop shows but the modal does not. You can also see this behavior with the example.html file if you include the bootstrap-transitions.js file. I created a jsfiddle to demonstrate:

http://jsfiddle.net/62CwQ/2/

I have tried to use data-dynamic and $("#myModal").modal({ dynamic: true }); and both.

When I use data-dynamic or .modal(), when I click on the modal toggle, the modal appears and then disappears.

When I use both, the modal appears on page open, and then as soon as closed reverts to appearing and disappearing on toggle.

Unless you have a input element selected, escape does not close the modal.

You can see it on the example page: http://aroc.github.com/Bootstrap-Scroll-Modal/example.html

Hi,

Set up the modal and all works well apart from when testing it on Safari 6.0.1 and it seems to be effecting my dropdown menus on my Nav.

So after clicking on the modal then closing it by clicking away from the modal, The wrap is left behind until i click again and when hitting my nav links no dropdowns appear.

If I refresh the browser all works fine again.

Works perfectly on Firefox and Chrome

Not a dev so sorry if this isnt enough info for you.

Cheers.
D

I've only seen this bug in IE7 and IE8.

Changes are not showing up on the modal until the mouse leaves the modal or the browser window.

To reproduce, add a radio button to the modal and click on the radio button. The button won't be enabled until the mouse leaves the browser window.

First off, thanks for extending bootstrap like this.

http://jsfiddle.net/aX8YW/14/

I put the Bootstrap Scroll Modal JS and CSS in the fiddle windows, so that you can tweak if need be, but right now they are the latest raw files that are on github.

The modal works fine in all browsers I have tested except IE8. For some reason when you enter text into the field, the cursor moves but the text doesn't appear. If you click outside the modal after typing, the text will appear but then if you put the cursor back in the field and delete or type more it is still pretty funky.

I will continue to see if I can fix it, and if I find anything I will definitely post back here.

I've tried all sorts of different things to get the scroll modal with the iframe's content to display properly. I've tried https://github.com/house9/jquery-iframe-auto-height/ to manually set the height though it's still rough going.

can be replicated on the demo example. this appears to be because the entire dialog is wrapped inside of the "modal-backdrop" div, and both your code and bootstrap have the following code for sending backdrop clicks, which doesn't distinguish between a direct div click and clicks of its children

if ( this.settings.backdrop != 'static' ) {
this.$backdrop.click($.proxy(this.hide, this))
}

i've tried my hand at limiting the target of the code using direct identification on the target, but my scoping of "this" isn't quite right, so no luck yet...:
if (this.options.backdrop != 'static') {
this.$backdrop.click(function(e){
/* Added by Sol - need to target just the outer backdrop to close, not inner children */
if (e.target.className == "modal-backdrop in")
{
$.proxy(this.hide, this)();
}
})
}

Why

  function removeBackdrop() {
    this.$element.insertAfter(this.$backdrop)
    this.$backdrop.remove()
    this.$backdrop = null
    $('body').css({ 'overflow' : 'auto' })
  }

vs.

  function removeBackdrop() {
    this.$element.insertAfter(this.$backdrop)
    this.$backdrop.remove()
    this.$backdrop = null
    $('body').css({ 'overflow' : 'visible' })
  }

?

It seems to work fine on most newer browsers though it boinks on IE7.

Had a problem with this today and realised that the following line has been taken out of the show function in bootstrap-modal.js.....

this.$element.trigger(e)

One of my colleagues put this plugin in and i dont know a lot about using GitHub projects so not sure how to contribute to the project but maybe someone wants to add it in as a fix?!?

Your extension works fine when using mouse scroll. However when I open the popup and immediately hit the navigational keys (up, down) it doesn't work, instead it scroll the modal's background.
If after that I click on the modal, it works again.
The issue occurs on your demo site, too. Please help to fix the issue

Hi,

When I open up one modal, the modal scrolls as expected and not the background. However, when I initiate another modal (second modal) from the first modal - first modal hides and second modal opens, the second modal has a background that scrolls like the original bootstrap behavior before this github code.

Any ideas?

Thanks!

Hi Eric,

great work buddy! Just a small issue I found today... If the modal shows up in a small screen width, the .modal-wrapper

.modal-wrapper {
    position: absolute;
    top: 50px;
    left: 20%;
    z-index: 1050;
    width: 70%;
    margin-left: 0px;
    padding-bottom: 80px;
    overflow: visible;
}

.modal-wrapper {
    position: absolute;
    top: 50px;
    left: 10%;
    z-index: 1050;
    width: 80%;
    margin-left: 0px;
    padding-bottom: 80px;
    overflow: visible;
}

I'm having an issue with it not being completely on top when scrolling. When scrolling it scrolls under a top navigation menu which is inside a nav tag which is nested inside a div. Any suggestions would be helpful. I've been testing in Chrome and have changed things with z-index but nothing has worked this far.

Hi Aroc! Nice job, im using yout scroll modal, doing well for me!
The only issue is my jobs outputs texts in portuguese, and I don´t know why and it only happens when I use the scrolling modal, the the special words with accentuation like "não", "também", "coração" and so many others, appears whith these special chars with a mistake, like if I needed to convert my result to any special charset encode, like utf-8 for example. Im using iso-8859 for the most pages on my project.
So the question is, do you know how to help me to solve it?
Fact: if I don´t use yout plugin, but the original bootstrap modal codes, these errors doesnt occurs.
Many thanks.
Daniel

Wanted to suggest a couple CSS improvements:

1.) It'd be better to use margin-bottom instead of padding-bottom on .modal-wrapper b/c padded areas of the overlay do not trigger the dialog to close when clicked, whereas margin allows that area to still work and close the dialog when clicked.

2.) It'd probably be better if the width and positioning-related CSS were moved to .modal, instead of .modal-wrapper. This way, if a user has a modal of a custom width they are able to alter the width and margin-left that applies to that specific modal using their unique class for it. But if the styles are on the parent element (.modal-wrapper, which is added by the JS), there's no way for a user to override this for a specific modal.

.modal-wrapper {
  padding-bottom: 0;
  margin-bottom: 80px;
  overflow: visible;
  z-index: 1050;
}

.modal {
  position: static;
  top: 50px;
  left: 50%;
  width: 560px;
  margin-left: -280px;
  z-index: 1060;
}

(Then I removed .modal-wrapper .modal { ... } completely.)

Just a couple things I had to figure out and thought it'd be worth mentioning in case you agreed, so future users wouldn't have to figure it out too. With the caveat that I haven't played with dynamic height models, so I don't know how this affects those.

I'm trying to use a CKEditor in the modal and I'm unable to edit any of the values or manipulate the buttons/dropdowns within the file. I've tried adding the fix here:http://stackoverflow.com/questions/14420300/bootstrap-with-ckeditor-equals-problems. That works using vanilla bootstrap, but including Bootstrap-Scroll-Modal breaks it. Unfortunately my js skills aren't good enough to figure out what is wrong, though I have discovered that it only focuses when manipulating objects in the modal-footer, not the body.

Backdrop false option on dynamic modal doesn't center vertically on screen. Appears with small margin from top.

Using Backbone, I often take a rendered element and run .modal('show') on it. The modal displays without any issue -- automatically inserted into the page.

With this version, I have to insert/append the modal element somewhere into the page before I can run .modal. Is there a way around this or is DOM insertion required?

Example:

$el.modal('show') works with the regular script.

$el.append('body'); $el.modal('show') works with this one.

Not a huge deal, but wanted to point it out. Thank you for your work!

Hi,

First thank you for this scrollable modal !

I don't understand why in:

, removeBackdrop: function () {
    this.$element.insertAfter(this.$backdrop)
    this.$backdrop.remove()
    this.$backdrop = null
    $('body').css({ 'overflow' : '' })
  }

doing this:

    this.$element.insertAfter(this.$backdrop)

The modal content stays on the page, and even the hidden event doesn't delete it.
My modals must be removed so i can load another one by ajax after.
This behavior didn't happen in original bootstrap modal.

Looking forward to learn more :)