I'd like to make a very simple jquery box come up saying "Sorry, that blog post could not be found."
I don't want anything very advanced... How should I go about this?
You can check out these nice custom alert and confirmation boxes. You can customize them.
The jQuery plug-in Impromptu is a good simple choice for a pop-up that looks a lot nicer than a standard JS alert
http://trentrichardson.com/Impromptu/index.php
There are instructions on the site that will help you in your implementation.
Like the jQuery UI Dialog? Here's a Working Demo
$('div.no-post').dialog({
buttons: {
"Ok": function() {
$(this).dialog("close");
}
},
title: "Post Not Found",
modal: true,
draggable: false,
resizable: false
});
<div class="no-post">
Sorry, that blog post could not be found.
</div>
or I've always liked the BlockUI plugin
Related
How can I run the modal and build the modal from dynamically create elements.
Example, I have a button that I want to launch the modal, which is dynamically created.
I'm using this modal plugin:
http://labs.voronianski.com/jquery.avgrund.js/
I have tried this, it does work, although it doesn't work until the 2ND click of the button.
$('body').on('click','#siteSwitch', function(){
$(this).boxModal({
height: 800,
width: 800,
holderClass: 'boxModal',
showClose: true,
showCloseText: 'X',
enableStackAnimation: false,
template: '<p>So implement your design and place content here! If you want to close modal, please hit "Esc", click somewhere on the screen or use special button.</p>'
});
});
Thankyou
I found the answer guys,
It seems adding openOnEvent: false as an option for the modal fixes it. It makes complete sense, by default it was true, so it's waiting for a 'click' event to fire the launch which hasn't happened until it's built once in the background.
Thanks!
Shannon
$(this).avgrund({})
code is like this, rather than boxModal()
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");
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
I need to ask my web site's user a Yes/ No question. Currently I use JavaScript's confirm() function.
The return value is true (OK) or false (CANCEL).
The word CANCEL is misleading. I want to have the buttons say Yes/ No instead.
How can I do it? i m using php..Code should run on both IE & Firefox
With HTML:
<div id="yesNo">
<p>Press Yes or No</p>
</div>
and jQuery:
$('#yesNo').dialog({
modal: true,
buttons: {
"Yes": function() { alert("Yes"); }
"No": function() { alert("No"); }
}
});
Or use standard confirm dialog (but it will have Ok, Cancel buttons):
if (confirm("Are you sure?")) {
alert("Yes");
} else {
alert("No");
}
How about using a JQuery dialog?
If you truly cannot rephrase the question as OK/Cancel, then you will need to create your own dialog in a div or something and 'pop it up' to the user. (You could also create a dialog as a page and then use a popup window to display it as a real native OS modal dialog, but this is perhaps more annoying.)
Unfortunately, javascript's browser built in dialogs are pretty limited.
Use something like jQuery UI. It has a nice dialog (including modal). As well as it have many other nice feature you may need in your webapp.
Of course you can paraphrase your question for OK/Cancel answer. But i think UI library is your friend.
I'm having some trouble with IE6 and jQuery UI. I have a popup dialog (modal, if it matters), that displays a "yes/no" dialog to the user with some information. In order to facilitate this, I build the dialog with autoOpen = false, and then I call $('#popup').show() later on as needed, in response to various different events. Now, in IE6 (and only IE6, as far as I can tell), the .dialog method will occasionally fail but STILL return the jQuery object. So, rather than show a popup, the .show() method just display a div container in the html page.
What could be causing this, and how I can fix this behavior?
Thanks.
$('#myDialog').dialog({
autoOpen: false,
buttons: {
"No": function()
{
$(this).dialog('close');
//do stuff
},
"Yes": function()
{
$(this).dialog('close');
//do stuff
}
},
draggable: false,
modal: true,
resizable: false,
title: "Confirmation",
width: "500px",
zIndex: 2000
});
and later
$('#myDialog').dialog('open').show();
Pretty standard.
New information
I'm loading the page that makes the dialog with ajax inside of another dialog, which can be repeatedly created and destroyed. Now, each time my page gets loaded with ajax, .dialog(opts) should re-instantiate the dialog div, correct? I've found that this is the scenario.
1.) An outer dialog uses ajax to replace its content with my content.
2.) My content launches a dialog that was previously created and set to not autoopen.
3.) The outer dialog is destroyed as the inner dialog is closed.
4.) The outer dialog is reopened. The inner dialog no longer is able to appear as a dialog in ie6. This ONLY happens in ie6.
You should open your dialog using
$('#myDialog').dialog('open');
instead of
$('#myDialog').show();
The first method displays actual dialog box, while the one you are using just causes the #myDialog item to be displayed (with no UI Dialog magic). show() method is the part of the core jQuery library and shoudn't be used to invoke a dialog.
I had a similar situation and was never able to reuse the dialog. I had to destroy and recreate both dialogs each time.
I use the bgiframe: true and I never got any problem with them with I6, FFox, etc.
More info: http://docs.jquery.com/UI/Dialog#option-bgiframe
Regards.
By the way, when you are hiding your modal before you open it, are you using style="display:none" as your hiding attribute, or a CSS class, or jquery?
The reason I ask, is that if you use simply style="display:none" I never have problems with the modal showing the modal perfectly all the time using dialog("open") but if I use either css or jquery, I always have problems.
You may want to test it.
Marcus