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.
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 have a custom Onsen Dialog with two buttons, and these buttons have onclick code in their html. I create this dialog using a template, and later when I try to hide this dialog with method like this
var dialog = document.getElementById("dialogSearchFriend");
dialog.hide();
I get an error "hide() is not a function".
I debugged this, and the dialog variable seems to be a template, rather than a dialog.
How can I solve this?
window.onload=function(){
$("#dialogSearchFriend").fadeOut();
}
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
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);
};
})();