Prevent modal to close when clicking outside the modal or by pressing 'Q' on the keyboard by introducing a new option property.

The above behaviour can be achieved by adding following attributes to the main div.modal 'data-backdrop="static" data-keyboard="false" ' - It can also be archived by JS

I introduced a new option and tried to add 'data-backdrop' in div.modal '_getMessage(data)' function but it didn't quite work yet.
What would be the best way to add prevent-close modal?

A malformed div tag shows up in the bottom of the modal during the loading:

you should replace this (line 151):

.replace('>1<', defaultSettings.loadingHtml);

with this :

.replace('>1<', '>'+defaultSettings.loadingHtml+'<');

in order to close div tag.

Encountering this message:
Syntax error, unrecognized expression: a[href*=#]:not([href=#])

It refers to main.js:
$('#navbar-collapsible li')
.on('activate.bs.scrollspy', scrollspy)
.find('a[href*=#]:not([href=#])')
.click(hrefClick);

I'm seeing this in IE11 on a 64-bit Win7 machine

On http://saribe.github.io/eModal/#demo in both Firefox and Chrome, nothing happens if you click any of the demos, except 'Alert', nothing happens.
If you then click 'Alert' and close the dialogue, the others work as well.

The error is that $modal is undefined.

I have showed a confirm box using emodal. It works ok. I need to show an alert message just after the user clicks "Yes" button of confirm. I gave the alert code inside the callback function of confirm. The issue is that confirm showing but alert is not showing (but sometimes its title is showing).. Also the popup background layer is still there even i clicked outside or press escape key. I need to refresh the page.

My code snippet is

eModal.confirm({message:"Do you really want to delete this?", size:'sm',title:"Confirm",callback: function(ans){
if(ans){
eModal.alert({message:'U clicked yes',title:"Yes",size:'sm',buttons:[]});
}
}});

How to get the input value in prompt()?

To be used in the callback

Hi everybody,

I'm very happy with eModal but I don't know why, even if I call like that:

eModal.alert(parameters.message, lang.message);

There is a case in where just the header is shown, and I have check that both parameters.message and lang.message are strings and are not empty.

I would much appreciate if you could help me.

Thanks in advance,

Gsdiama

Hi there,

The version distributed by npm is still 1.1.3, but I'd like to use 1.2.6. Is it possible to add this version to npm?

Hi,

I don't know how the event works. The follow code does nothing.

What is wrong?

var options = {
message: "The famous question?",
title: 'Header title',
size: eModal.size.sm,
subtitle: 'smaller text header',
label: 'Yes',
callback: function(){alert(1);},
callbackCancel: function(){alert(2);}
};

    eModal.confirm(options);

Thanks

I am using the following code with ajax eModal.

function OpenProfile(regno){
        var options = {
        url: "http://example.com/profileview/"+regno,
        title:'Profile View',
         buttons: [
            {text: 'Select this Profile', style: 'info',   close: true, click: SelectProfile(regno)  },
            {text: 'Close', style: 'danger', close: true, click: CloseProfile() }
        ]
        };

      eModal.ajax(options);
    }

When I call the above function SelectProfile & CloseProfile methods are immediately fired.
How to fix the issue, those methods should be fired only when the corresponding buttons clicked.

click ok 3 times

I am making a confirm modal for some delete actions, and I'd like the "Yes" button to be danger, instead of the "No" button. Is this possible, or do I need to make an alert and define buttons instead?

I'm building a modal FORM using an iframe and a separate form html on my site. I can load it without any problem BUT when I create a SAVE button (on the primary html page) to a function I cannot seem to get access to the form fields in the iframe. I've even hacked the code a bit to add an ID to the iframe but still have no luck getting a handle on the iframe html document object. Any suggestions?

Hi, il would be usefull if your script could open remote adress in an iframe.

VERSION 1.1.X

When using a an 'options' var like the one below, clicking cancel in the dialog window doesn't respond the first time but the second click it does closing the dialog.

Code used in php:
var options = {
message: "The famouse question?",
title: 'Header title',
size: 'sm',
subtitle: 'smaller text header',
label: "True",
function(result) { result ? DoSomething : ' ' }
};

Actual call (javascript): eModal.confirm(options);

Regards,
Eric

Feature suggestion : add to options the ability to set an id and or class to the dialogue.

Ex param : var params = {modalId = 'my-modal-id', modalclass = 'my-modal-class' }
Ex modal :

It will help a lot to modify modal contextually.
Thanks

Is there a way to define the modal size?
The current preset sizes are very limiting.

Serving the script through the raw link for the master branch (as you suggest in the readme) is not a good solution because this is also (presumably) the address for any future new versions. You should supply the stable release link from your release tag instead in your readme.

Using RawGit you can easily make CDN-links. I.e. supplying RawGit with https://github.com/saribe/eModal/blob/1.2.6/dist/eModal.js (current stable tagged version) gives you https://cdn.rawgit.com/saribe/eModal/1.2.6/dist/eModal.js. Since there is no uptime or support guarantees on this CDN, it may not be fully safe for production, but no CDN should be trusted fully, so users should use the link to download eModal for local serving and perhaps use the CDN link with fallback.
To make it easy for users to use CDN with fallback you could supply an expression to test whether the library has been loaded properly. Here is an example of CDN with fallback using jquery.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>(window.jQuery)||document.write('<script src="/lib/jquery/script"><\/script>');</script>

Just switch window.jQuery with somthing that evaluates to true if eModal has been loaded correctly like so:

<script src="https://cdn.rawgit.com/saribe/eModal/1.2.6/dist/eModal.min.js"></script>
<script>([emodal_detection_expression])||document.write('<script src="[server_local_copy]"><\/script>');</script>

This would be useful by allowing certain actions to target only specific modals.

function createModalElement() should contain
<div class="modal fade" tabindex="-1">
instead of
<div class="modal fade">
... or an option to add tabindex for "keyboad: true"

Thanks!

How to set custom labels on confirm modal?

It looks like this plugin relies on two modules, 'jquery' and 'Q'. I've never seen the module 'Q' before. Can you explain why that module is required, and how I can change my requirejs configuration to take it into account?

For what it's worth, it looks like the variable for that module is only used in one place:

        function _createDeferred() {
            var dfd = q ? q.defer() : $.Deferred();
            if (!q) {
                dfd.catch = dfd.fail;
                dfd.promise = dfd.promise();
            }
            dfd.promise.element = $modal;
            return dfd;
        }

I cannot find a way to access the eModal object to close via javascript.

I tried:
m=eModal.iframe(data,title);
m.modal('hide');

and other variances.... What gives?

eModal.ajax({
url : url,
title : 'the title',
size : eModal.size.xl
});

but size all time sm

I want send post request to url and post data. How to do it?
And how to set modal container attribute "id" or "class"?

If include the eModal.js like this

Then i click and close .. When i click again ... the title disapper!

Firefox and chrome got the same problem.
Is there something wrong?

Hi

• SaRibe: eModal.js v1.2.6

$(document).on("click","."+deletebutton,function(){
            var id = $(this).attr("id");
            var options = {
                message: "The famous question?",
                title: 'Header title',
                size: eModal.size.sm,
                subtitle: 'smaller text header',
                label: "OK"   // use the positive label as key
            };
            eModal.confirm(options)
                .then(toastr.success('why? now....', 'WTF'));
        });

and the 'toastr' is used before it is confirmed .. :( why

FIX, CLOSE

Hi,

Thanks for the wonderful plugin first. I'm using the Iframe feature and it works great so far :)

2 questions -

1. How do I add an on hidden handler to the modal? I'd like to refresh the main page once the modal containing the iframe is closed.
2. How do I control the size of the iframe so that it doesn't auto adjust height to fit the screen (I already set size to 'lg')? I'm using the modal as a file upload window and it doesnt need to be that "tall."

Thanks !

There should be an option to preserve ajax response so that only first time will perform ajax call, not every time.

I am receiving an error in browser console as below :

eModal.min.js.map:2 Uncaught SyntaxError: Unexpected token

But everything is working fine.
How to fix this issue?

first try to the eModal and when loading the basic prompt function it shows the error that Deffered is not defined.
used the same giving example eModal.prompt('What is the best song ever?', 'Fill the input');

the error is at eModal.js line #100

same happens with confirm function

How to close eModal Ajax dialogue, after click on success buttons (who submitted a form) ?

Actually I have the following code on success button, I used to submit a form from ajax dailog.

$('#eFooter > button.btn.btn-success').click(function(e) {
    e.preventDefault();
    $.post('ajax.php', $('form').serialize(), function(data, status, xhr)
    {
        console.info(data);
        console.info(status);
        console.info(xhr);

        toastr8.success('Saved !','Saved');
    });
});

How close the current dialog ?
Thanks for help

Hi!

This is my first comment here in GitHub, so I don't know if this is the proper place.

I'm working in a project and this plugin is helping me a lot (thanks for that!).

However, I'm having the following problem: I'm mainly using the emodal to load pages via ajax. Sometimes the pages are quite long, and it's needed to scroll down to read all the content. Although it works great if the user scroll with the mouse's scroll, It quits the modal if the user clicks on the navbar of the browser.

Do you have any idea of how can I get to work the browser's navbar on big pages?

Thank you very much and best regards

Hi

i try click on demo iframe have problem loading not hide

The correct path to main file in bower.json should be dist/eModal.js.

Bootstrap modal supports backdrop:static and keyword: false options so that the modal box does not closes if you accidentally clicks outside of a modal box but this is not working with this plugin.

Hi,
first of all thank you very much for a such a good plugin.
As per my requirement i need the call back function after ajax success call.
So can you please tel me know how can i do this.
Let me explain = >
Actually i need the data according to id but if id is not found in that case i will return the json_resopnse false. So in that case i need to show error message inside the model.
I can see you are using function OK(){} inside your lib file. Actually i need to override this function because i am returning json response not html.

i see iframe have border fix it on line 401 add frameborder="0"

'<iframe frameborder="0" class="embed-responsive-item" src="%0%" style="width:100%;height:75vh;"/>')

in eModal.ajax, is there a way to make all buttons in footer disabled while loading remote content and then enabled after remote content is successfully loaded. i'm using eModal to load a form and place the submit button in the footer. since the loading of form could possibly take time, i think it could be helpful if there is a way that the submit button in the footer will only be enabled after the form is successfully loaded. i am no javascript expert to figured this out and really like the simple use of eModal. :)

function build(message, params) should return:
return $modal.modal(params);

instead of
return $modal.modal(options);

Hey (great project by the way)

I'm seeing an issue where the callback only fires when I call the function the second(+) time.

Here's my code:
https://gist.github.com/fa839f059b263b9e7be9.git

Any ideas? I noticed that when I run it the first time, my url goes from:
/static-nodes to /static-nodes?# - What's the question mark doing?

Thanks!

could provide this package via bower?
thanks for this package

I've attached screenshot to this message.

Hi,
It will be usefull if we could fixe the header or the modal. (like this : https://groups.google.com/forum/#!topic/twitter-bootstrap-stackoverflow/CTGFn30PqLI)

I dont find a solution without fork your plugin.

Thx

Hi,

How to insert custom code for manipulate the event emodal to close?

My form is loaded into the emodal, if the submit form is not available, i want that the eModal not close, if is available then close emodal.

//this code emodal ajax
buttons: [
                {text: 'Salvar', style: 'info',   close: false, click: save },
                {text: 'Fechar', style: 'danger', close: true}
            ],
//this code event save
function save(){
$.ajax({
sucess:function(data){

if(data.error){
$.notify({data.error.msn});
eModal.close(false); // ????
}else{
$.notify({data.success.msn});
eModal.close(true); // ????
}

}
});
}

While running on IE 8:

Line: 80
Char: 21
Error: Expected identifier
Code: 0
URL: http://.../eModal.js

After loading ajax modal all other jquery functions which uses the jquery ui .button() function not working.
i.e., functions which has the following code are not working.

 $btn.button('loading');

Console logs the following error :

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.
Uncaught TypeError: $(...).button is not a function

Hi there,
I've got a very strange situation with modal, I debugged but couldn't understand the cause of this.
I'm using smartadmin to build an admin page. (Demo : http://192.241.236.31/themes/preview/smartadmin/1.8.x/ajax/index.html#ajax/dashboard.html ). In every page when I click the navigation link, the content (id content is reloaded with new content). I setup the emodal js successfully. The first time I access that page, emodal works ok, then I click another nav link then go back to emodal page, the modal only show the overlay.
One thing that when I debuged is that $modal's outerHtml changed when i go back to emodal page. The first time modal display & close, the $modal's Html contains divs like modal-content, modal-header ... , , .., At the time I go back to emodal page, the $modal's html has only empty .modal div ( ex : "

I have a responsive page loading (bootstrap), but the content is overflowing the modal window instead of wrapping. The page content resizes properly in the native browser window so I know it's not a page layout issue unless the "lg" size just happens to be sitting between default media breakpoints.

Any suggestions? Maybe a custon size param would be nifty.

Thanks.

I have a site where I'm using eModal, and mostly it works fine. However, at one point I wish to delete some data, but I need confirmation first. Therefore I have a confirm eModal, which the callback set to display an Ajax emodal (syntax is for vue.js, but works OK otherwise):

deleteMonth: function(dateString) {
  var self = this;

  var options = {
      title:      'Delete This Months Data',
      message:    'Are you sure that you wish to delete all this months data?',
      size:       eModal.size.sm,
      label:      'Delete'
  };

  eModal.confirm(options)
      .then(function() {
    self.destroyMonth(dateString);
      }
    );
},

destroyMonth: function(dateString) {
  var self = this;

  var options = {
      url:    '/path/to/delete',
      title:  'Delete This Data',
      size:   eModal.size.sm
  };

  eModal.ajax(options);
},

You can see it with this link to fiddle

Is it possible to chain modals in this way? I would have thought having a confirm modal before an ajax modal would be fairly common - am I missing something?