peppel-g / bootstrap-3-modal Goto Github PK

I don't know if this is a Modal problem or a Blaze problem but this is where I noticed that having either an
Input element with autofocus or even setting focus() directly on an input element, works only the first time the window opens.
Thank you for your time.

Template opens Modal1:

Template.items.events({
    'click .btnItemSearch': function (event) {
        Modal.show('modalSearchItem');
    }
});

Modal1 opens Modal2 and hides itself. (this works)

Modal.allowMultiple = true;

...

Template.modalSearchItem.events({  
    'click button.add-item': function (evt, template) {
            evt.preventDefault();
            Session.set('selectedItemId', this._id);
            Modal.hide('modalSearchItem');
            Modal.show('modalEditItem');
        }
    }
});

Modal2 attempts to hide itself and nothing happens. No errors either.

Template.modalEditItem.events({
    'click button.save-item': function (evt, template) {
        evt.preventDefault();
        var item = { 
            "_id" : $('#formItemId').val(), 
            "itemName" : $('#formItemName').val()
        };
        // Modal.hide('modalEditItem'); // <<< Does not work here either
        Meteor.call('saveItem', item, function (error, result) {
            if (error) {
                alert(error.reason);
            } else {
                console.log('SUCCESS'); // <<< I see this logged
                Modal.hide('modalEditItem'); // <<< Nothing happens, modal stays visible, no console error messages
            }
        });
    }
});

NOTE: if the base template calls the 2nd modal directly, the second modal DOES correctly hide itself as expected.

If the user clicks outside the modal window, the modal closes, but I can't figure out how to detect this.

When the modal is open, I can navigate by background page pressing the TAB key.

when I check your code, and comment on:

        // Only show the modal if no modal is shown at the moment.
        // See issue #2.
        //if($modal == null){

        var template = Template.peppelg_modal_test;
        var data = {
            templateName: templateName,
            data: data
        };
        var parentNode = document.body;

        view = Blaze.renderWithData(template, data, parentNode);

        //}

it is OK for modal on modal, but i know the problem when click more then one time (duplicate modal).
have any solutions?

Hi. Thanks for this package!!!

Just a question: How can one now call/load the modal from within a partial template or from a certain div like the example from the link below:

http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_modal_sm&stacked=h

I have a main page with several partial templates and I'm using modals to insert/update data specific to those templates. So, loading these modals from within the partial template where it was called and not in the middle of the screen would give users better guide and functionality. This is true for those using
larger/wider screen sizes.

Thanks in advance.

@PeppeL-G
I have been using this wonderful package with bootstrap 4 and it has worked fine until my chrome browser updated. Click events to show modals don't result in any errors neither does the modal show up.

Modal shows in older versions of firefox and Opera browsers.
I believe the issue may be related to this but not sure what to do make this package show the modals.

I need help fixing this issue, its critical!

I often find myself to add a modal view to a form. So I'm wondering if it would be in the scope of this package to add a new function along these lines :

Modal.showWithTemplate = (template,data,title) ->
  Modal.show("ModalTemplate",{template: template, data: data, title: title})

Where the template would be something like this :

<template name="ModalTemplate">
  <div id={{template}} class="modal fade">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          {{title}}
          <button type="button" class="close" data-dismiss="modal">
            <span aria-hidden="true">X</span> <span class="sr-only">{{_ "close"}}</span>
          </button>
        </div>
        <div class="modal-body">
          {{> Template.dynamic template=template data=data}}
        </div>
      </div>
    </div>
  </div>
</template>

This simple function would allow the reuse of a single template for many modals.
If you think this could be a worthy addition, and if you don't have time to do it yourself,
I'll be happy to prepare a PR .

I try to use modal in modal (2 level), it dont work.
pl help me.

It looks like the default settings of keyboard=true should allow this, but it doesn't seem to be working. I also tried manually setting keybaord=true and passing that in, but it still doesn't work. Any idea how I can get this working?

Is this package removing the template from the normal template hierarchy?

Template.parentData(x) returns null for any value of x

When I call I got an error:
TypeError: $modal.modal is not a function peppelg_bootstrap-3-modal.js:71:3

I use http://bootswatch.com/yeti/ package.
Whats wrong?

do the bs size classes work with this i.e. bs-example-modal-lg?

Not sure what I'm doing wrong here. I've used this package in a few projects, but just decided a small project needed 1 modal and added the package to it, wrote up a modal like normal, and it won't show. I'm using the nemo64:bootsrap package, same as I've used in other projects in combination with this modal package.

Any ideas what might cause this? Problem is with this line of code: $modal.modal(options ? options : {})

I'm not passing options, just: Modal.show('dataConfirmModal',fileObj); and the data object doesn't make a difference, same error when just calling Modal.show('dataConfirmModal');

Helpers within the modal run, but it doesn't show.

Whats the proper way to pass modal options as shown on Bootstrap documentarion?

Hi! This package is great. Is there anything stopping the inclusion of the standard Bootstrap modal 'options' object as a third parameter?

can you elaborate on this?

To remove a modal, you need to pass the modal's template instance as
the first argument to Modal.hide. Usually, this is done in an event handler,
where the template instance is provided as the second argument.

When I click away from a modal, it disappears, but I'm unable to show it again with Modal.show. I guess it's just invisible but still loaded? How does this work exactly? Does clicking away from the modal fire an event which I can use to hide it?

collapse works by click a button to show modal .
but collapse not work in modal .

I am getting this error. Can you tell me why am I getting this error

W20151201-17:33:10.472(5)? (STDERR)
W20151201-17:33:10.472(5)? (STDERR) /home/kwanso/exampleModal/.meteor/local/build/programs/server/app/exampleModal.js:85
W20151201-17:33:10.473(5)? (STDERR) Modal.show('exampleModal'); // 84
W20151201-17:33:10.473(5)? (STDERR) ^
W20151201-17:33:10.476(5)? (STDERR) ReferenceError: Modal is not defined
W20151201-17:33:10.476(5)? (STDERR) at [object Object]._onTimeout (exampleModal.js:84:9)
W20151201-17:33:10.477(5)? (STDERR) at Timer.listOnTimeout as ontimeout
=> Exited with code: 8

Hi, I'm having some issues when trying to show a large or small modal using .modal-lg or .modal-sm.

I'm working with this example:

<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">

      <div class="modal-header">
        <h4 class="modal-title">{{title}}</h4>
      </div>

      <div class="modal-body">
        {{> quickForm collection=this.collection._name id="modalForm" type=operationType doc=this.data}}
      </div>

      <div class="modal-footer" style="display:none"></div>

    </div>
  </div>
</div>

And it renders kind of "cut out" of the screen.

Any idea?

I am in the process of replacing standard alert and confirm dialog boxes with modals because they look so much nicer. I've run into a problem where if the page is in fullscreen, unlike confirm and alert dialogs, the modal does not open over the page, instead it appears behind it and is not visible until the user hits Esc to exit fullscreen.

My current workaround is to add code to exit fullscreen before showing the modal, but this isn't perfect and if there's a way to make the modal open over the fullscreen page, that would be much better.

I tried setting the z-index on .modal and .modal-open classes to 1100, but that didn't effect anything.
Any tips would be appreciated.

I allowed multiple modals. The first modal opened is a disabled modal which is {backdrop: 'static', keyboard: false} then within the first modal a button to open the second modal, just a normal modal. after closing the second modal by clicking outside, the first modal won't hide when using Modal.hide('exampleModal'); I have tried this with a clean project.

-- main.html

<head>
  <title>simple</title>
</head>

<body>
  <h1>Welcome to Meteor!</h1>

  {{> hello}}
</body>

<template name="hello">
  <button id="buttonOne">Click Me</button>
</template>

<template name="exampleModal">
    <div class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header">
                    <h4 class="modal-title">Modal example</h4>
                </div>

                <div class="modal-body">
                    <button id="buttonTwo">Click Me Again</button>

                    <button id="hideModal">Hide</button>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>

            </div>
        </div>
    </div>
</template>

<template name="anotherModal">
    <div class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <p>A modal example 2.</p>
                </div>
            </div>
        </div>
    </div>
</template>

-- main.js

Modal.allowMultiple = true;

Template.hello.events ({
    'click #buttonOne': function() {
        Modal.show('exampleModal', {}, {keyboard: false, backdrop: 'static'});
    }
});

Template.exampleModal.events ({
    'click #buttonTwo': function() {
        Modal.show('anotherModal');
    },
    'click #hideModal': function() {
        Modal.hide('exampleModal');
    }
});

Hi,

The modal window shown didn't get the focus :

Can you please help ?

Thx
:)

Is there a way to pass data when modal is open/showed? Maybe something like,

Modal.show('templateName', data);

Hoping for your response. Thanks!

Should I be able to show a modal template from another template file? In other words, say I've got deleteModal in main.html and settingsModal in meeting.html. settingsModal has a delete button which does hide("settingsModal") and then show("deleteModal") but I can't get it to recognize deleteModal. Am I missing something? Thank you for the terrific package!

would I request you to create option of max height on modal body?
I have problem with the long body modal (multi modal), and i try custom like:

// css
.modal-body {
    overflow-y: auto;
}
// js
modalMaxHeight = function () {
    var height = $(window).height() - 200;
    $(".modal-body").css("max-height", height);
};

I call this after Modal.show.
I think that it is good, like the Modal.allowMultiple = true

Hello, thank you for your package.

But I have one question:
Is it possible if I want to open a modal on another modal?
For example I opened a modal that has "a button" and when I click on this button I want to show another modal without closing the first one.

Thank you in advance.

Could we show the modal, where user can click on buttons to make their selection.
Then I need to use this selection from the caller code to set value.

I was hoping I can pass callback like so:

Modal.Show('mydialog', function() {
Meteor.calls('SetDialogValue', session.get('getMyDialogSetValue'));
});

Any clue?

Thank you, great package!

I would like to request to hide modal by modal id.
Ex

// Template
<div class="modal fade" id="modal-student">
...........

// Js
Modal.hide('modal-student');

Quick question: I need to add firstName and LastName fields to the registration form. I was thinking I could use the template-extensions package to add the fields and handle the data persistence in the onSubmitHook, but I'd also need to do validation (isRequired), so I guess this kind of customization is a bit too much eh? Would it probably be more straightforward to just remove the package and roll my own forms?

Cheers!

Hi,

Using this package with bootstrap 4 gave me some problems, but they're solved using the new markup for modals. In case someone got here with the problem that modal isn't showed up but it's there (using the inspector), just add these fields to your html: tabindex and role, like in this example:

<template name="myModal">
  <div class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">

        <div class="modal-header">
          <p>Header!</p>
        </div>

        <div class="modal-body">
          <p>Content!</p>
        </div>
      </div>
    </div>
  </div>
</template>

NOTE: I also had to remove the fade class for the modal to show up. Quite akward as bootstrap 4 uses it in its modal examples.

I'm getting the following error no idea why

Exception from Tracker afterFlush function: undefined is not a function
TypeError: undefined is not a function
at Template.(anonymous function).rendered (http://localhost:3000/packages/peppelg_bootstrap-3-modal.js?d3acaf20b1a8221ce93b3f378d27901b1dd9d000:108:9)
at null. (http://localhost:3000/packages/blaze.js?efa68f65e67544b5a05509804bf97e2c91ce75eb:3008:21)
at http://localhost:3000/packages/blaze.js?efa68f65e67544b5a05509804bf97e2c91ce75eb:1733:14
at Object.Blaze._withCurrentView (http://localhost:3000/packages/blaze.js?efa68f65e67544b5a05509804bf97e2c91ce75eb:2043:12)
at http://localhost:3000/packages/blaze.js?efa68f65e67544b5a05509804bf97e2c91ce75eb:1732:15
at Tracker.flush (http://localhost:3000/packages/tracker.js?7f0c5481709a504dd2254ba2a71c1cee78adc280:448:11)

Reproduction

I don't know if I am doing something fundamentally wrong here, but if I call a Modal.show(...) right after Modal.hide() the modal window is not displayed.

I encountered this quirk, when trying to implement modal windows appearing one after another in a sort of step-by-step procedure - modal window appears and based on buttons clicked in that window another one appears. Putting the second Modal.show(...) in a Meteor.setTimeout() like in the example below

Modal.show('exampleModal');
Modal.hide();
Meteor.setTimeout(function() {
  Modal.show('exampleModal2')
  }, 1000);

circumvents this issue and I think that using Template.dynamic similar to the approach shown here will also work (although fade-in fade-out effect will be lost in that case), but I would like to know if I am doing something wrong with my initial approach.

Thank You!

On rendering a modal with a data source, I'm finding that when the underlying data source changes, the information in the modal is not updating reactively.

For example, on running

Modal.show( 'detailedTaskModal' , Tasks.findOne(taskId) );

Which shows a modal of

<div>{{title}}</div>

And then doing a simple update like this:

Tasks.update( id , {title: "newer description"} );

does not update the title field to the newer description. Instead it continues to show the old description. When you exit and re-open the modal though, the data is updated.

I'm wondering if there's any way to make the data passed into the argument reactive again? Is it that I'm passing a variable thats to be copied instead of a data source that Blaze.renderWithData can reactively update with?

Cheers!

i have a Modal template file : addContactsModal.html containing a template named addContactsModal ( ... ) ; when do Modal.show("addContactsModal") , i doesn't work; and when i give a different name either to the file or the template it works perfectly.

I don't know if it's a bug or i did something wrong ?

First of all: "Thanks for the package".
Would it be complicated to add a Modal.isOpened() that returns a boolean.
If by accident I click twice, or if my mouse does special tricks (sometimes) more than one instance of the modal is displayed.
I think I could check if a template named is already appended to the DOM but this add-on sounds like a nice feature to add.

Thanks again.

Everytime I try to open the modal, it doesn't work. I recieve this error: Uncaught TypeError: $modal.modal is not a function. I'm doing this tutorial: http://experimentsinmeteor.com/modal-dialogs-part-2/, and doesn't work... Please help me!!

can not pass data to update of autoform:

// Template
<template name="companyUpdateModal">
    <div class="modal fade">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">Company Update</h4>
                </div>

                {{#autoForm collection=Collection.Company id="companyUpdate" doc=data type="update"}}

  ....................................
// When click on update btn with id
'click #update': function (e) {
        var id = this._id;
        Modal.show('companyUpdateModal', function () {
                return {data: Collection.Company.findOne(id)};
            }
        );
    }

Please help me.

It appear that this package can interfere and cause strange behavior with autoforms that are nested in the modal. Errors range from getting an "id not found" message from the autoform library, to having the auform load with no labels or types.

For a while, it was working without incident, but as soon as I added another form to another modal, I couldn't even get the first one to work. Autoforms work fine anywhere else in the app. This includes the autoform and quickform tags