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);
};
})();
Related
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
I am using PhantomJS for a UI testing framework in C#. I am trying to click an element, which displays a confirm box, in one action and then return to the calling C# with the confirm box still open. Then, I am trying to call back into PhantomJS to click 'OK' on the dialog box in a second action.
The problem is that there is a callback attached to the confirm box which returns true/false (OK/Cancel), so the default behaviour just cancels the confirm box. I can attach my own custom callback, taking the message passed to the actual ( var result = confirm('message') ) call, like so:
page.onConfirm = function(msg) {
console.log('Confirmation box showing for: ' + msg);
return someBooleanValue;
}
But because of the truthy/falsey stuff in javascript, whatever I return here will either OK or cancel the confirm dialog - I can't seem to just leave it open.
It's worth mentioning that I am trying to still to plain javascript as opposed to introducing JQuery because it is a testing framework.
Any ideas how I do this?
For the benefit of anyone having the same issue, essentially the answer is that you can't do this. I just wound up having to define a default behaviour for these callbacks.
I used below code for showing message in my page
if (Session["Message"] != null)
{
//Write message code here
this.ClientScript.RegisterStartupScript(GetType(), "Javascript", "<script>alert('insert succesfullyا')</script>");
Session["Message"] = null;
}
I want this message show with (font=Tahoma font-size=12px and font-weight:bold )
How I can do it?
Nope, its not possible.
You have to use custom alert box.Using jQuery, here are some:
jAlert
jQuery UI dialog (with some tweaking)
This page proposes three alternatives to native alert/confirm/prompt
This answer shows a way to have a confirm-like blocking dialog using jquery ui dialog
Check this already answered SO Question: Change the styling of default alert 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";
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.