saribe / emodal Goto Github PK
View Code? Open in Web Editor NEWEasy Modal for bootstrap, is a simple way to create modal dialogs using javascript.
Home Page: http://saribe.github.io/eModal
Easy Modal for bootstrap, is a simple way to create modal dialogs using javascript.
Home Page: http://saribe.github.io/eModal
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
Hi
i try click on demo iframe have problem loading not hide
Hi, il would be usefull if your script could open remote adress in an iframe.
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?
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?
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
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?
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 can't see any code that remove the modal-content, modal-header div from $modal variable. So that's really strange to me.
Please help me with this situation.
Thanks,
Dong
While running on IE 8:
Line: 80
Char: 21
Error: Expected identifier
Code: 0
URL: http://.../eModal.js
click ok 3 times
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:[]});
}
}});
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.
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,
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
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. :)
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 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;"/>')
This would be useful by allowing certain actions to target only specific modals.
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.
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?
function build(message, params)
should return:
return $modal.modal(params);
instead of
return $modal.modal(options);
Hi,
Thanks for the wonderful plugin first. I'm using the Iframe feature and it works great so far :)
2 questions -
Thanks !
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
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
How to get the input value in prompt()?
To be used in the callback
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
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
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.
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.
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.
I want send post request to url and post data. How to do it?
And how to set modal container attribute "id" or "class"?
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?
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?
Hi
$(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
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!
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); // ????
}
}
});
}
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?
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;
}
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!
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>
Is there a way to define the modal size?
The current preset sizes are very limiting.
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
eModal.ajax({
url : url,
title : 'the title',
size : eModal.size.xl
});
but size all time sm
could provide this package via bower?
thanks for this package
How to set custom labels on confirm modal?
There should be an option to preserve ajax response so that only first time will perform ajax call, not every time.
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.
The correct path to main file in bower.json should be dist/eModal.js
.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.