vodkabears/remodal

No longer actively maintained.

remodal's Issues

Removal error?

I'm running into strange behavior when opening/closing the modal three times.

I'm grabbing the instance as pointed out in the docs:
modal = $.remodal.lookup[$('[data-remodal-id=modal]').data('remodal')]
And when some event fires in my app, I open the modal.
modal.open()
When the modal triggers a close (via clicking offscreen or the 'x'), I do some logic processing.

       $(document).on 'close', '.remodal', (e) ->
            if e.target.id is "folder-modal"
                scope.html = ''
                scope.data = ''

For some reason, 3 rotations of open, close will spit a jQuery error on the third open:
TypeError: Cannot read property 'remove' of undefined

window/document width calculation breaks Remodal on subsequent clicks

I am working with a site that leverages Remodal, but after the first successful triggering of Remodal, all subsequent clicks fail with the following error:

Uncaught TypeError: Cannot read property 'open' of undefined [scdashboard.js:161]
(anonymous function) [scdashboard.js:161]
n.event.dispatch [jquery.min.js:3]
r.handle [jquery.min.js:3]

JS

157   $( "a.view-documents" ).click(function(e) {
158       e.stopPropagation();
159       e.preventDefault();
160       var options = {"hashTracking": false};
161       $('[data-remodal-id=modal]').remodal(options).open();
162       });

After some troubleshooting, and after commenting out the following line of code, Remodal works perfectly.

var windowWidth = window.innerWidth;

// also fails with:
// var windowWidth = $(window)width();
// var windowWidth = $(document)width();

Issue is, this var is substantial in maintaining the site's layout structure.

Any known issues/conflicts with use of Remodal along with width calculations? Any thoughts of how one might combat this conflict?

Again, Remodal displays once without issue/error, but all subsequent clicks error out.

Put close button on the right

Hello!

First of all, thanks so much for making this awesome modal window library. I love the style and responsiveness of it.

I was wondering if you could provide an option (perhaps through CSS right margin) to have the close Button (x) on the right side instead of the left?

It seems most interfaces these days put the close button on the right so it would be nice to kind of follow that pattern to make it easier on the user.

wrong behavior during scrolling

Please check the attachments. I think that it is not an expected behavior.

Remodal works only with js inserted before </body>

Remodal works only with js inserted before closed body tag, but not if it inserted in head section (as described in readme). =\

Remodal Ajax

Hey,
i really like your plugin! Great work! My question: Is it possible to load content via Ajax using Remodal?

best regards

Not possible ?

I'm french and i use your nice plugin, however, i try to disabled (or unbind/off ) the event click on a particular link wich allow open my "remodal". But I don't succeed ... just $(document).off("click", "[data-remodal-target]"); works fine but it disabled ALL link ...

Moreover, have you implement a solution to check if the remodal pop-up is open or close through a solution of the type :

var inst = $.remodal.lookup[$('[data-remodal-id=modal]').data('remodal')];
inst.isOpen(); // return false if not open otherwise true ???
inst.isClosed(); // return false if open otherwise true ???

Thanks !
(Sorry for my bad english :S)

Prevent overlay click closing modal

Can you add an option to the plugin to prevent the modal closing if the overlay is clicked.

Suggestion: Make styling more flexible

Hi,

As I'm starting to use remodal in most of my projects, I decided to share some thoughts. These are my very own suggestions:

Split CSS into functional / style

I wonder if it would be possible to split the CSS into two parts:

• remodal Necessary Styles
• remodal Default Theme

This would definitely help users/developers who want to customize or create their own modal style. This is exactly what they did with FlexSlider CSS, and it makes it so easy to create your own style (basically just remove everything after ** FlexSlider Default Theme **).

Allow custom animations

It would be awesome if we could for instance use animate.css along with the remodal. We could either specify globally or per modal (<div class="remodal" data-remodal-id="contact-modal-success" data-remodal-options='{ "animIn": "bounceInDown", "animOut": "bounceOutUp" }'>) the animIn and animOut. You can check out what I did here for another modal plugin (which I'm progressively replacing with remodal).

Lemme know what you think ;)

Cheers

Auto Load

how can I call automatically when you open the page?

Page scrolls to top when opening modal without # navigation

Even when I don't use the hashTracking function the page scrolls back to top when open the Remodal window, is there a way to fix this ?

The code:

<a data-remodal-target="test" class="huug" id="test">
    <div class="single-project">
        <div class="caption"><p>Test</p></div>
        <img width="750" height="500" src="thumbnail">
    </div>
</a>

<div class="remodal" id="modal_test" data-remodal-id="test">
    <!-- load dynamic content --> 
</div>          

<script>
$(document).ready(function() {
    $("a.huug").click(function() {
        var pid = $(this).attr("id");
        $("div#modal_"+pid).load("/?projects="+pid);
    });
});
</script>

Iframe

Hi! Beautiful modal! I'm just wondering how you can open the modal within an iframe?

Initialise Remodal via ajax

This is more of a question than an issue. I just wasn't sure where to place this.

I'm using remodal on my ecommerce website, specifically on a collection page that lists a bunch of products. For each product there is a remodal window. On this page I'm also using infinite scroll but for each new product loaded in using infinite scroll, its accompanying remodal window doesn't work.

When I copy the entire plugin contents within my success event (below), everything works fine. How can I package your plugin up into one line so it initialises correctly?

The code I have for the success event is:

$.ajax({
       success: function(data) {
           // remove loading feedback
           scrollNode.next().remove();
           var filteredData = $(data).find(".scrollnode");
           filteredData.insertBefore( $("#product-list-foot") );  
           // initialise remodal here but how using shortcode?
       }
   });

Specify namespace

Hi there,

It would be awesome if we could specify a namespace. So for instance, we could replace the prefix remodal- with whatever-.

This could be useful to prevent conflicts with another instance of the plugin (I'm working on a WordPress plugin that uses Remodal, and there's no way for me to know if there theme already uses remodal).

Cheers

hashTracking: false -- still scrolls to top?

I have disabled the hashTracking in the settings but it still scrolls on click. The modal div is as such:
<div class="remodal" data-remodal-id="modal">

and the link is:
<a data-remodal-target="modal" href="">Modal</a>

Any idea why it is still scrolling?

Tabindex only on form elements inside the opened modal window

Hi,

I have webpage with many HTML form elements. Each element has own tabindex attribute starting from 1. Than I have modal popup with another form elements inside with tabindex attribute starting from 1. I thought that if I refocus on the first element in the modal window, problem will be solved, but form elements on the backround are still active by pressing TAB key.

Is there any way how can I disabled form elements on the background?

Thanks for your advice ;-)

input text jumps on iOS

Stop video when closing

Is there a way to stop a video inside remodal when closing it?

Fire a event right before remodal is opens.

Is there a way to run a function right before the remodal opens. What I am trying to do is; I have a content slider within the remodal and want to be able to slide (uses hashtaging ) to a specific slide based on click. its pretty much, click on a button and it will open the remodal and show the slide that is set for.

Thanks, awesome work btw

Content behind overlay visible

As you have documented, there are 2 options for dealing with overflow if you have set HTML to have height: 100%.

Under certain circumstances neither of these options are working well in my testing so far. Normally, with a HTML set to height: 100%; the screen jumps to the top before opening the lightbox - which isn't ideal. Using the alternative html, body { overflow: auto !important; margin: 0; } will stop the page jumping from the top, but on touch devices you can then scroll the content behind the modal, which doesn't happen with the first option.

With either option set there is a problem with the content behind the overlay becoming visible, this happens when the modal is tall enough to move offscreen when a touch device on-screen keyboard is brought up. When the keyboard is closed by tapping the .remodal box part of the background becomes visible.

The below is taken on an iPad mini retina and happens with both Safari and Chrome:

how to use |method="post"| in Remodal?

hi how to use |method="post"| in Remodal like this:

<form class="form-4" action="signin.php" method="post">
...
...
</form>

its not work when i presing ok button.

Modal breaks on mobile

Hi there.

I didn't actualy check all mobile platforms, but as far as I can see on iOS (iPhone 4s), the remodal window breaks on scroll.
When I try to scroll the modal content it's cuted off to the screen size. I mean you can actually see only the piece of text that has been displayed when modal shows up.
Take a look at these screenshots:

Remodal loaded (or the phone is rotated) :
http://phillip.com.pl/sample/inne/remodal-open.png

Scroll down the remodal content :
http://phillip.com.pl/sample/inne/remodal-scroll-down.png

Scroll up the remodal content :
http://phillip.com.pl/sample/inne/remodal-scroll-up.png

Kindly,
Artur.

strange issue when using .remodal().open()

this is html for remodal

<div data-remodal-id="modal-terms">
    <p>
        You need to Update Your Shipping Info
    </p>
    <br>
    <a class="remodal-confirm" href="#">OK</a>
</div>

and this is my JS code

$('[data-remodal-id=modal-terms]').remodal().open();

it open fine first time. but after i close the remodal popup. and try to open again it does not open.

Scrolling when browser is resized

I am utilizing Remodal for my new site. One thing I noticed is that if I resize the browser window to something smaller then the modal dialog box, then I am seeing double scroll bars.

http://canalcupom.com.br/#modal

Is there a simple way to have the overflow scroll bar for the dialog box be tied to the main content window scroll bar?

Close Button missing

Hi,

I started testing remodal on my site and everything was ok, but now after full implementation, the close button of the modal does not appear anymore and can't seem to find an option to enable it (or find where I disabled it)

Any help? Thanks

Horizontal jump when vertical scrollbar is hidden

Thank you for this great library. I just need help with one issue...

I'm using Remodal on a page that is long enough to require vertical scrolling (at least on smaller monitors). I'm using the default styles, including:

html.remodal_lock,
body.remodal_lock {
    overflow: hidden;
}

As expected this causes the browser to remove the scrollbar. The problem I'm having is that my page responds to the new viewport size and jumps about 20-30px to the right when the modal is displayed.

Is there an easy/known way to mitigate this effect?

Right way to remove close button

Hi! Thanks for this great plugin! I love declarative style 😄
is this a right way to remove the close button from modal?
$.remodal.lookup[$('[data-remodal-id=login]').data('remodal')].modalClose.remove()

Modal not loading on Safari 8

When clicking on the Event Information button to load the modal in Safari 8, the page shifts 15px to the left and the modal does not appear unless I resize the page to a mobile view. I am unable to reproduce this issue in any other browser, only Safari.

Example

Live: http://masqueradeoftampabay.org/

Remodal and Backbone

Am I correct in thinking that Remodal doesn't work with Backbone? It seems if modals are inserted into the DOM after Rremodal.js has loaded, they don't trigger.

How can I stop confirmation of my modal window

Hi,

I'm using this definition

$(document).on('confirm', '.remodal', function () {
    var modal = $(this);
});

Is there any way how can I stop closing of my modal window? I need to validate form inside my modal window. If it fails during confirmation, I don't want to continue with closing of modal window.

Thanks a lost

Opening of Modal Scrolling to Top of Page

Hey,

First up thanks for your great modal script.

I'm having the same issue described here #20.

However using min-height doesn't work in terms of keeping my #header div 100%. Currently set up as html, body {height: 100%;} and #header {min-height:100%;}. If I change html,body to min-height it doesn't fill the screen however the modal works correctly any doesn't scroll to the top of the page.

Is there any fix for this without having to remove height:100% ??

Thanks in advance!

Close Event executing after confirm.

Hi, it is any way to prevent event "close" to execute after confirm event ???

I mean "close", not "closed" ...

Thanks a lot !

How to set the hashTracking option to false globally?

Hello there,

As I'm using Yeoman Bootstrap Less generator (a bundle that includes bower and a bunch of Grunt modules) with remodal, I'm getting an annoying issue when I inline the option and compile.

Before compiling:

<div class="remodal" data-remodal-id="contact-modal-success" data-remodal-options='{ "hashTracking": false }'>

After compiling:

<div class="remodal" data-remodal-id="contact-modal-success" data-remodal-options="{ \"hashTracking\": false }">

As you know, the last piece of code does not work. Therefore, I edited the plugin itself (jquery.remodal.js) and set hashTracking to false, as a temporarly solution. I would like to do it the right way, and set the option globally without editing the source.

I really like this plugin and I would be grateful if you could help :)

Cheers

# at the end of url after closing

Hi,
Your plugin works great... but after closing the modal I have a "#" at the end of my URL.
I am doing something wrong?

Thanks!

Crash after two viewed images

Hi,

FYI, your plugin is crashing for me after I view more than two photos, error below:

TypeError: Cannot call method 'open' of undefined

How to print the text inside the modal?

I'd like to have a print icon inside the modal, and be able to print the modal content only.

How can I do that?

hashTracking

как отключить хэштег data-remodal-target="modal" не работает

Open automatically on page load

Is there a way to get the modal to automatically open on page load.

Thanks!

remodal-overlay residue in DOM after closed

OS: Arch Linux
Browser: Chromium 38.0
JQuery: 1.11.1
Remodal: 0.3.0

Each time after executing following code, the dialog appears correctly.

    $($.parseHTML("<div>test</div>")).remodal().open()

However, the remodal-overlay element appears in DOM and would not be erased even after the dialog has been closed.

Is this intended behavior ? It would be convenient if we can make modal dialog like this.

Issue with form submission

My issue is similar to #29, but I'm using Meteor and in that the form isn't being submitted by post. There is a submit form event handler setup. This event handler never gets used because remodal is doing something else fist. I've tried the solution posted in issue 29, but that doesn't work either.

Also, if I remove the modal and just use the form on a page it submits just fine. Any advice as to where I might look. I've already read through all the docs and tried many different combinations from them to try to resolve this. Thanks

Hide [X] button?

There is an option to do not show de [X] button at the top corner of the modal?

Launch modal directly from a div

Launching modal from an anchor tag is pretty straightforward like 'a href="#modal">'. However, if I need to launch from a div with an 'id' or a 'class', I need to use a script like $('[data-remodal-id=modal]').remodal() and use the functions open() etc. Is there no direct way to achieve this?

Resizes by 100% of height while resizing window

I resize my browser window, and remodal window just goes by 100% of height

Prevent closing modal on clicking outside of modal (anywhere on the body)

is there any way to prevent closing the modal by clicking on outside of the modal? i want the user to click on the close button in order to close the modal.

Safari 5.1.7: onConfirm/onCancel close - remodal-bg width decreased (by 10px?)

Bug with scroll width?

Fixes for page shift on modal open and "x" icon not showing up

So I've been playing around with Remodal and I noticed two very common scenarios. One is when the modal is launched, the page shifts to the left. Found a fix for this. The calls to the functions lockScreen() and unlockScreen() in jquery.remodal.js are causing it. If they are commented out, the issue is resolved. Another thing, often the cross (x) doesn't show up in the modal box. Instead it shows some garbled text. It can be fixed with adding to the html file.

iOS 5: TypeError: 'undefined' is not a function fix

It seems iOS 5 does not like the 'bind' method,
Use the bind shim from this gist: https://gist.github.com/jussi-kalliokoski/978329 to resolve.

Loading modal from ajax

Hey hows it going, First of all thanks for the great work on this plugin its amazing and its the best looking modal for responsive design.

I'm attempting to use this for our wordpress file document manager but its ajax based so I would be loading the modal boxes in dynamic ajax pulled content. I'm finding that the modal will not open when pulled from an ajax request. So what I'm doing is making the request then appending the pulled html to a div. Do you know of a work around for this? I'm guessing its because the html and modal is added after remodal initiates

IE8 needs everything after document.ready

An old unpatched version of IE8 (v. 8.0.6001.18702) was throwing this error when loading a page with remodal elements: "HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917)"

I found a solution that appears to work fully in several browsers, but I have not tested it 100%. Inside the jquery.remodal.min.js file, I simply wrapped the ENTIRE file inside:

$(document).ready(function() { /* entire file */ });

Returning from Facebook Login

When returning from a facebook login the = fragment is causing rmodal to throw an error. This seems to occur when there is an equals sign in the url fragment.

To fix my issue I added

if(window.location.href.split("=").length > 1)
  window.location.href = window.location.href.replace(/=/g,'')