How do you change the words on the buttons in a javascript alert? I am new so the simplest way possible would be greatly appreciated.
You can't.
Instead, you can create a fake dialog in the DOM, using jQuery UI Dialog.
not possible, the browser sets that
what you could do is make a fake alert from elements,
You can overriede window.alert and have your own implemenation of it.
window.alert = function(msg, options){
//Create the alert dialog box here using the default options and show the message.
}
You dont have to change your code in the application to use it.
Try something like this
function CustomAlert(msg){
var customAlert = $("#customAlert");
if(!customAlert.length){
customAlert = $(document.body).append('<div id="customAlert"><div class="message">Msg></div><div><input class="button" type="button" value="Ok" /></div></div>').hide();
}
customAlert.find("message").html(msg);
//Code to center the customAlert into view port along with faded background will go here
customAlert.find("input.button").unbind("click").click(function(){
//Hide the customAlert goes here
customAlert.hide();
});
}
Related
I have the follow simple code for a confirm box
<!DOCTYPE html>
<html>
<body>
<p>Click the button to alert the hostname of the current URL.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
confirm("Confirm!!!!");
}
</script>
</body>
</html>
but my problem is I want with css to style the OK and Cancel button with a very simple way. I'm looking for a real simple solution.
This question has been asked more:
How to style default confirm box with only css?
confirm box styling
Answer; you can NOT style the confirm() function it's dialog box since it's browser generic.
You will have to search for alternatives like these:
jQuery Boxy: onehackoranother.com/projects/jquery/boxy/
jQuery Dialog: jqueryui.com/dialog/#modal-confirmation
You could also try to create your own dialog box. Which is not quite simple as you asked for. However, lot's of tutorials can be found:
Tutorial 1: www.developphp.com/view.php?tid=1385
Tutorial 2: tutorialzine.com/2010/12/better-confirm-box-jquery-css3/
(Sorry, as a beginner I'm not allowed to place more links)
alert and confirm are built-in to JavaScript and STOP page execution until they are answered, which is what allows you to do:
if( confirm('do you want to see this?') ) {
//show them.
}
Any confirm() solution that you work-up that can be styled won't be able to be included in an if statement. If you want code to only execute when the confirm is clicked, then you need to make that code as a callback, which make the above code look more like this:
mySpecialConfirm('do you want to see this?', function() {
//show them
} );
Then, you have to wire that function call into the "ok" button click on the confirm dialog that you create. This means that it's inherently more complicated just from a coding standpoint not to mention the code that has to wire that up to an HTML form. I would say that it's not worth it to re-invent the wheel and make your own modal. This means that you need to choose jQuery and jQuery UI, or jQuery and Bootstrap, or Dojo Toolkit, etc., and then from there look for the solution that they have for doing this, or use their modals.
As far as I know, you can't change the style of native pop up windows, but you can create your own with a bit of JavaScript trickery.
function promptWindow() {
// Create template
var box = document.createElement("div");
var cancel = document.createElement("button");
cancel.innerHTML = "Cancel";
cancel.onclick = function() { document.body.removeChild(this.parentNode) }
var text = document.createTextNode("Please enter a message!");
var input = document.createElement("textarea");
box.appendChild(text);
box.appendChild(input);
box.appendChild(cancel);
// Style box
box.style.position = "absolute";
box.style.width = "400px";
box.style.height = "300px";
// Center box.
box.style.left = (window.innerWidth / 2) -100;
box.style.top = "100px";
// Append box to body
document.body.appendChild(box);
}
After calling promptWindow you have your own pop up box, which you are free to style!
Hope this helped!
We already have a CSS that adds a "new window" icon, indicating that the link will open a new window:
a[target $="_blank"] {
padding-right: 15px;
background: transparent url(http://opi.mt.gov/Images/SiteWide/Icon_External_Link.png) no-repeat center right;
}
Our lawyers want a popup message that states some legal mumbo-jumbo for every external link. Unfortunately, we have an extensive web site with possibly 10,000 external links! It will be prohibitive to find and touch each link to add a class tag, etc.
Is there any way to modify the above code so that the message appears on hover, much like an 'Alt' or 'title' type?
Thanks in advance!
If you are using jQuery, you could add a global function to attach a click event to all your external links based on the proper selector.
for example:
$('a[target="_blank"]').click(function( event ) {
event.preventDefault();
var yesno = confirm("Legal! Sure you want to go to an external source?");
if (yesno) window.open($(this).attr('href'));
});
I'm sure you could do the same with some type of hover message. Just depends on how you would want to render that. I just used an confirm dialog in my example.
Maybe you can use :after css statement, see http://coding.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/
You can do it with JavaScript too, depending on what kind of action you want to do, if you are running on a touch device, you might want to to a confirm dialog. JSFiddle for here.
var myLinks = document.querySelectorAll('a[target $="_blank"]');
for (var i = 0, length = myLinks.length; i < length; i++) {
// You can listen for whatever you want, different for touch
// so you might want to do it on click and do a confirm dialog
myLinks[i].addEventListener('mouseover', handleLegal, false);
}
function handleLegal (e) {
// Do what you want here.
alert('Hi');
}
I have a script that restrict the click on a href link if there;s no checkbox selected. I want the editpr.php open in modal box. The problem is I'm not familiar with modalbox. Any help?
<a class="button edit" style="cursor:pointer;" ><span><b>Edit Purchase Request</b></span></a>
<a class="button remove" style="cursor:pointer;" name="remove"><span><b>Remove Purchase Request</b></span></a>
This is my script
jQuery(function ($) {
$('a.button.edit, a.button.remove').click(function () {
if ($('input[name="checkbox[]"]:checked').length == 0) {
return;
}
if (!confirm('Do you want to continue?')) {
return
}
var frm = document.myform;
if ($(this).hasClass('edit')) {
frm.action = 'editpr.php';
}
if ($(this).hasClass('remove')) {}
frm.submit();
})
})
You can't open a page in a modal box just with pure javascript, as "alert()" or "confirm()".
To do what you want you need to put your 'editpr.php' content inside a div, and make it modal with CSS.
Actually we have a lot of libraries that make it happen easily, I think that most used is: http://www.jacklmoore.com/colorbox/
Check the "Outside HTML (Ajax)" and "Outside Webpage (Iframe)" on this example page, probably is the same thing that you want to do: http://www.jacklmoore.com/colorbox/example1/
There are some useful jQuery plugins that can make your job really easy. I suggest you give them a try. Here you have an example.
Since you are already using jQuery you could use jquery-ui.
They have an exmple of what you want to do here:
http://jqueryui.com/dialog/#modal
Once you get your modal dialog element setup, all you have to do is make and XHR for editpr.php, load the result into the elements innerhtml, then display the dialog.
// setup your modal dialog
var el = $( "#editpr-dialog" ).dialog({
// ... (other config options)
modal: true
});
// XHR editpr.php and show the dialog box
$.get('editpr.php', function(data){
el.html(data).dialog('open');
});
The custombox plugin has a lot of beautiful features and works amazingly with Jquery: http://dixso.github.io/custombox/
When using tinyMCE in a jqueryUI modal dialog, I can't use the hyperlink or 'insert image' features.
Basically, after lots of searching, I've found this:
http://www.tinymce.com/develop/bugtracker_view.php?id=5917
The weird thing is that to me it seams less of a tinyMCE issue and more of a jqueryUI issue since the problem is not present when jqueryUI's modal property is set to false.
With a richer form I saw that what happens is that whenever the tinyMCE loses focus, the first element in the form gets focus even if it's not the one focused / clicked.
Does some JavaScript guru have any idea how I might be able to keep the dialog modal and make tinyMCE work?
This fixed it for me when overriding _allowInteraction would not:
$(document).on('focusin', function(e) {
if ($(event.target).closest(".mce-window").length) {
e.stopImmediatePropagation();
}
});
I can't really take credit for it. I got it from this thread on the TinyMCE forums.
(They have moved their bugtracker to github. tinymce/issues/703 is the corresponding github issue.)
It seems there are no propper solution for this issue yet. This is kind of a hack but it really worked for me.
Every time you open the Dialog remove the text area and re add it like following,
var myDialog = $('#myDialog');
var myTextarea = myDialog.find('textarea');
var clonedTextArea = myTextarea.clone(); // create a copy before deleting from the DOM
var myTextAreaParent = myTextarea.parent(); // get the parent to add the created copy later
myTextarea.remove(); // remove the textarea
myDialog.find('.mce-container').remove(); // remove existing mce control if exists
myTextAreaParent.append(clonedTextArea); // re-add the copy
myDialog.dialog({
open: function(e1,e2){
setTimeout(function () {
// Add your tinymce creation code here
},50);
}
});
myDialog.dialog('open');
This seems to fix it for me, or at least work around it (put it somewhere in your $(document).ready()):
$.widget('ui.dialog', $.ui.dialog, {
_allowInteraction: function(event) {
return ($('.mce-panel:visible').length > 0);
}
});
This is my code to make the alert appear when i hover over the image;
var special_offers = document.getElementsByClassName("special_offer");
//for each special offer
for(i=0;i<special_offers.length;i++){
var special_offer = special_offers[i];
special_offer.setAttribute("offer_shown", "0");
special_offer.onmouseover = function(){
if( this.getAttribute("offer_shown") == "0" ){
this.setAttribute("offer_shown", "1");
alert('This room has the special offer attached to it, please book soon before you miss out!');
}
}
I wanted to find out how i change this from the bog standard JS alert to a box that i can style, i imagine i'd use some sort of a div.
Any help is much appreciated.
http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/
This is a good resource for creating your own modal window. You can use your function to fire the modal window you created instead of just using alert() to fire up the standard alert.
Do you want to direct your message to a div?
Create the div
<div id="mySpecialOffer">
Some Text gets updated
</div>
In your js you could then target this id and update with what ever message you would like.
document.getElementById("mySpecialOffer").innerHTML = 'some Text';
You could even hide the div in css and then unhide with the JS.
Or you can create the HTML...
document.getElementById("mySpecialOffer").innerHTML = '<div> Special Offer Div Inserted </div>';
This is even easier with jQuery.
Is this what you had in mind?
What you should do is open a whole new window, like a small webpage with that message. That would be the easiest way to go!Here is a link: http://www.w3schools.com/jsref/met_win_open.asp
You will want to have the window.open() activated when people mouseover an image.you can specify the size and positioning of the window, in this case the center of the screen, and a small window.
Hope that helps!