popup window on a drag and drop in javascript - javascript

How can I make a popup window appear when I drop an element in a box?
I have tried to use alert but I can't customize it to my liking. I've found someone else's code online to customize an alert but it isn't what I am looking for.
Should I use a bootstrap modal?
Thanks

ondrop, or whatever drop event works best for you, just trigger a function like this (with sample arguments):
function myFunction() {
window.open("urlOfPopup", "", "width=200,height=100");
}
Or without URL:
function myFunction() {
var myWindow = window.open("urlOfPopul", "", "width=200,height=100");
myWindow.document.write("<p>Popup content</p>");
}

From my experience, I have had great success with the following library:
https://sweetalert.js.org/guides/

You can use different libraries to customise pop up experience. I would recommend you sweetalert and bootbox libraries. Bootbox is built upon Bootstrap modals with a lot of customisation. You can view the details on following links:
http://bootboxjs.com
Link on how to customise bootbox popup:
http://paynedigital.com/articles/2011/11/bootbox-js-alert-confirm-dialogs-for-twitter-bootstrap

Related

how to create a ckeditor into a jqueryui dialog?

I'm trying to use a CKEDITOR instance into a jqueryUI dialog.
$('[name=dialog]').dialog();
$('[name=content]','[name=dialog]').ckeditor();
It works fine until i want to use the dialogs from the editor (f.e. dialog to set an URL, dialog to create a table)
it's like i can't click on that dialog..
i was checking for the z-index (i think that is the problem) but nothing, it is the highest level and nothing, i can not use those dialogs.
Anybody knows why is this for?
I know this post is a little late, but maybe it'll help the next guy.
To create a ckeditor instance in a dialog, you have to load the dialog first and then create ckeditor like this:
$("#mydialog").dialog({
open: function() {
$("#mytextarea").ckeditor(); //LOAD IT HERE
},
close: function() {
//you might want to destroy the instance once the dialog closes
//to keep things clean
CKEDITOR.instances["mytextarea"].destroy();
},
autoOpen: true, ... more options
});
Hope this helps.
Its easy, just the next code ( sorry for the formatting, but I'm replying using my mobile )
$("<div><textarea id='foo'></textarea></div>").dialog({});
CKEDITOR.replace("foo");

Dialog pop up box

I would like to make register button, but when people click on it. A pop up dialog will appear and has two button for user to click. One is YES , One is NO. IF they select YES, will pass them to X page. Convert way, they select NO, will pass them to Y page. I search on google but only OK and cancel confirm.
YES --> VIP REGISTER
NO --> REGULAR REGISTER
Should i use Jquery?
You can use jQuery UI for this.
$('<div>', {text: 'Do you have VIP code?'}).dialog({
modal: true,
buttons: {
'Yes': function() {
window.location = ...;
},
'No': function() {
window.location = ...;
}
}
});
Note that this dialog box will by default include a "close" button and will also close automatically if you press escape. You need to either disable those features (see here for how), or decide what action to take (if any) when that happens.
You can do this in classic javascript
var answer = confirm ("Do you have vip code?")
and then treat the answer accordingly
You can use the built-in confirm method if you don't want to customise the look-and-feel of the dialog (you can't change anything, including the text of the buttons):
if (confirm("Do you have VIP code?")) {
//Yes!
} else {
//No
}
If you want to customise the dialog, look at the endless lightbox scripts that are available. As mentioned by #Alnitak, jQuery UI provides a good one.
jquery is a good way to do this very easy. But often the problem is, people belive they can use jQuery without understanding Javascript itself. So, first learn the basics of Javascript (for Example: Methodchaning, Closurs, Array-Handling, Prototyping) and after that try jQuery. The Box you want is very easy to do with jQuery-UI and
window.location = "vip.html";

Pass a value to a popup

Here I am facing a problem, I will explain:
I set up a calendar on my website, when I click on an event to this calendar I open a popup until the hopefully it works correctly, I would like to change the content of my popup by inserting values my event.
eventClick: function(calEvent, jsEvent, view) {
z=open('popup.html','','width=400,height=200,toolbar=no,scrollbars=no,resizable=yes,location=0,directories=no,menubar=no,status=no');
z.document.getElementById('test').append(toto);
},
Above me the code that opens my popup correctly I created a new file by "popup.html.
The last line does not work against ...
z.document.getElementById('test').append(toto);
I have an element with the id "test" in the HTML file of my popup. I also tried to generate the popum the fly from my script, I get this solution in a properly transmit information I want displayed in the popup io unfortunately I do not find a solution to the stylized popup window
w=open("",'popup','width=400,height=200,toolbar=no,scrollbars=no,resizable=yes');
w.document.write("<TITLE>"+document.forms[0].elements["titre"].value+"</TITLE>");
w.document.write("<BODY> Hello"+document.forms[0].elements["nom"].value+"<BR><BR>");
w.document.write("this popup work");
w.document.write("</BODY>");
w.document.close();
Do you have a solution to my / my problem?
Thank you in advance,
Good afternoon,
cordially
Do you really want a new window? Or do you only want a modal, like the jQuery.UI dialog?
In order to use the latter you usually prepare a <div>, e.g.
var myDialog = $("#toto");
myDialog.dialog({ autoOpen: false });
and use myDialog.dialog('open') to open it. Note that this will remove #toto from its parent. If you don't wish this behavior try var myDialog = $("#toto").clone().
You can then style the new dialog with the jQuery css methods.

Override default browser alert() method

Is it possible to change a browser's default behaviour for built-in javascript methods?
For example:
Calling alert() from jQuery Mobile creates a non-themed dialog box. It would be great to override the browser's default alert() behavior and replace it with a slick jQuery Mobile themed dialog box?
I realize there are many options for creating themed dialog boxes in jQuery Mobile, but if it was possible to create a tiny javascript library that would intercept a call to alert(), that would be really nice.
You can not style a JavaScript Alert, If you need something to style use a dialog. There should be plenty of examples if Googled.
Check this jQueryMobile plugin for themed dialogs: http://dev.jtsage.com/jQM-SimpleDialog/index.html
Using this code you can override the default alert function in javascript and we can do actions based on the alert message. The default alert function will also work same with this.
(function () {
var _alert = window.alert;
window.alert = function (str) {
if (str == 'Invalid Sesssion')
window.location = "http://www.mywebsite.com/";
_alert(str);
};
})();

How can I display a yes/no message box to the user in Javascript?

How can I display a yes/no message box to the user on the client-side in Javascript?
I don’t want to display “OK” and “Cancel” to the user, which is the default behavior of the confirm function in Javascript. Any help will be appreciated.
You can't amend the Ok/Cancel of the default confirm box, but you can use a 3rd party library (such as jQuery/jQuery UI) which will give you what you need: http://jqueryui.com/demos/dialog/#modal-confirmation
have a look at this jquery plugin http://www.84bytes.com/2008/06/02/jquery-modal-dialog-boxes/
jQuery UI has modal confirmation boxes
http://jqueryui.com/demos/dialog/#modal-confirmation
I just posted in my blog an easy to use Yes/No message box that you can easily modify to fit your project.
Example:
SmallJS.message.modal('Do you want to click yes?', {
buttons: {
ok: 'Yes',
cancel:'No'
},
onOK: function () {
SmallJS.message.show('Yes sir!', { animate:false});
}
})
You can see the source code at: http://www.waltersoto.com/javascript/javascript-yes-no-message-box

Categories