We Keep Coding

popup window on a drag and drop in 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

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";

Twitter Bootstrap style default JS alert

Is it possible to style default JS alerts using Twitter Bootstrap? For example:
alert("You can select maximum 8 files at once.");

You can't style normal alert windows. Their look and feel is controlled by the OS. The best you can do is shadow the real alert function with one of your own. For example, you could override alert with a function that writes the message to console instead:
​alert = function(msg) {
console.log(msg);
};
alert("Hello");
In your custom alert method you could open one of Bootstrap's modal windows with the message.
Here's a working example of the above code.

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