I'm trying to follow this basic jquery dialog article on how to open a modal dialog. The code goes like so.
<!doctype html>
<html>
<meta charset="utf-8">
<title>Basic usage of the jQuery UI dialog</title>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var $dialog = $('<div></div>')
.html('This dialog will show every time!')
.dialog({
autoOpen: false,
title: 'Basic Dialog'
});
$('#opener').click(function() {
$dialog.dialog('open');
// prevent the default action, e.g., following a link
return false;
});
});
</script>
</head>
<body>
<p>This is an example from the Nemikor Blog article Basic usage of the jQuery UI dialog.</p>
<button id="opener">Open the dialog</button>
</body>
</html>
(where I've skipped a page counter in the sake of brevity). The original example works fine; a modal dialog is displayed.
Now I'd like to combine this awesomeness with my rails app, creating a modal dialog as indicated in chourobin's answer. I've added a
<div class="modal" style="display:none;">
<h1>Test</h1>
</div>
part to the body, and changed my $('#opener') to
$('#opener').click(function() {
$(".modal").dialog('open');
//$('.modal').css( "border", "3px solid red" );
return false;
});
Unfortunately, no dialog is opened. Yet, when I set the modal div to be displayed by default, and comment out the dialog call and uncomment the css call in the above code, jquery successfully identifies the modal class and paints a 3 pixel, red, solid border around my div.
My question is: why aren't jquery displaying the (clearly identifiable) div in a dialog as in my initial attempt?
$(".modal").dialog();
Is what you're looking for
Since the <div class="modal"> is not visible when the page is loaded you need to use the .on() method and bind the event to the parent to the <div>.
Try something like
$('body').on('click','.modal',function(){
//your code here
});
You have two different calls for the dialog. On the first call you have set some parameters. On the second call you have not.
I would suggest to remove the inline style attribute (since this is keeping it hidden) and add a param for the dialog. like your working example did.
<!-- Removed the inline style -->
<div class="modal" title="Testing the Modal Code">
<h1>Test</h1>
</div>
//-- Adding this
$('.modal').dialog({
autoOpen: false
});
//-- Using the same call
$('#opener').click(function() {
$(".modal").dialog('open');
//$('.modal').css( "border", "3px solid red" );
});
This should provide the result you want.
The dialog will open with:
$(".modal").dialog();
Here is an example: http://jsfiddle.net/nH339/
Related
I am using https://jquerymodal.com to show a modal dialog in my home page. But I read in documentation:
Create a link with rel="modal:open" and set the href attribute to the modal's DOM id.
I´ve try change the interaction from click button to window load with:
<script>
$(window).on('load', function() {
$('#tour-virtual').modal('show');
});
</script>
I am new with javascript and I don´t know how to make this change.
Could you help me please?
You can do like:
$(window).on('load', function() {
$('#tour-virtual').modal('show');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<div id="tour-virtual" class="modal">
<p>Thanks for clicking. That felt good.</p>
</div>
I have a simple question. I have the following code:
alert("Are you sure you want to add: \n" + redirURL + "?");
the variable redirURL is an actual working url. I would like it to be 'clickable'
thank you in advance
use window.confirm instead of alert
if (window.confirm('If you click "ok" you would be redirected . Cancel will load this website '))
{
window.location.href='https://www.google.com/chrome/browser/index.html';
};
You can only display text in the alert function. If you want to put an url, you can do it by using jquery's dialog function. Here are some code examples: http://jqueryui.com/dialog/#default
If you want to open the Link on alert and that too in new window, Use the code below:
if (window.confirm('Ok to Confirm, Cancel to Stay here'))
{
window.open('http://www.google.com', '_blank');
};
Note that most browsers will treat these links as popup.
🙄
There is an alternative too, Both works same, find it below:
//write this above first
let a=document.createElement('a');
a.target='_blank';
a.href='https://www.google.com';
//then use this code for alert
if (window.confirm('Ok to Confirm, Cancel to Stay here'))
{
a.click();
};
👍
That's not possible to put clickable links in alert windows.
The closest thing you could do is using a modal window, like this: http://twitter.github.io/bootstrap/javascript.html#modals
You can't put clickable URLs in a standard alert() box. Instead you could use a "lightbox", which is an HTML popup - there are any number of them available, and you should choose one that fits well with the rest of your site/applicaiton.
It's not possible in any "standard" web browser that I'm aware of.
I'd suggest using a more robust approach like jQuery UI's dialog.
It is not possible with window.alert that you are using. Instead you can try using dialog plugins like modal plugin from bootstrap or jquery ui dialog. Your hyperlink is an html where as alert box is non html component of the browser generated by browser's javascript.
The alert dialog should be used for messages which do not require any response on the part of the user, other than the acknowledgement of the message.
Reference
This is a method with Jquery's Dialog
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style></style>
</head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script src='template/js/jquery.textarea-expander.js'></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
// <---- VENTAÑAS DE PARAMETERES---->
$(document).ready(function() {
var regex,v,l,c,b,i,contapara=3;
$( "#wnd_Addparam" ).dialog({
autoOpen: false,
height: 'auto',
width: 350,
modal: true,
resizable:false,
buttons: {
"Link": function() {
location.href="http://stackoverflow.com/questions/16973240/link-in-alert-boxes-javascript";
return false; },
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: {}
});
$( "#wnd_Addparam" ).dialog( "open" );
});
</script>
<body>
<div id="wnd_Addparam" title="Information" ></div>
</body>
</html>
I just can't figure this one out. The Dialog Box doesn't popup. I've tried all sorts of things but it just doesn't work. Here's my code:
<head>
<script type="text/javascript" src="/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.8.20.custom.min.js"></script>
</head>
<body>
<script>
$(function() {
// Dialog
$('#dialog').dialog({
autoOpen: false,
width: 600,
buttons: {
"Ok": function() {
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
// Dialog Link
$('#dialog_link').click(function(){
$('#dialog').dialog('open');
return false;
});
});
</script>
Open Dialog
<div id="dialog">This should popup</div>
</body>
What's wrong here? Any help appreciated.
Try to use this it might be work.
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
Where is jquery.ui.dialog.js in this scode?????
Please add this file into code as script tag....
you can put this JS file from here :
http://jqueryui.com/ui/jquery.ui.dialog.js
<script></script> is not enough. Should be <script type="text/javascript"></script>
I think the script tag just after body missing type="text/javascript". ie. <body><script type="text/javascript">...
You have to include the script block after the
Open Dialog
<div id="dialog">This should popup</div>
block just before the body element and it should work.
You have to include also all the styling of the jQuery UI so that it looks nicer.
I have a same problem.
It is probably a compatibility issue, try including the below instead of what you have
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.22/jquery-ui.min.js" type="text/javascript"></script>
Also to display the dialog properly, replace jquery-ui-1.8.xx.custom.css to match the jquery-ui.min.js version, I could not find a google ajax link.
I want to find an alternative solution but no idea if I can find one.
I want to toggle between a div on a pop-up modal form. The problem i see is the document.ready() function on the modal page, which tries to load the parent form. It distorts the whole page and tries to show automatically if i load the main parent form. Is there something like div.ready()? how do i include this code on my pop up modal form?
Toggle code here
<html>
<head>
<title>jQuery test page</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#clickMe").click(function() {
$("#textBox").toggle();
});
});
</script>
</head>
<body>
<a id="clickMe">Toggle my text</a>
<br />
<div id="textBox">This text will be toggled</div>
</body>
Yes, such expressions like DOM_ELEMENT.ready() exists and very useful in scenarios like the one you are facing right now.
Update:
I found that this plugin is doing what you need :
jQuery.elementReady()
Examples:
1:
Change the source of a specific image as soon as it is loaded into the
DOM (before the whole DOM is loaded).
$.elementReady('powerpic', function(){
this.src = 'powered-by-jquery.png';
});
2:
If you want to have the jQuery object instead of the regular DOM
element, use the $(this) function.
$.elementReady('header', function(){
$(this).addClass('fancy');
});
3:
Chain multiple calls to $.elementReady().
$.elementReady('first', function(){ $(this).fancify(); })
.elementReady('second', function(){ $(this).fancify(); });
4:
Use the ‘$’ alias within your callback, even in noConflict mode.
jQuery.noConflict();
jQuery.elementReady('header', function($){
$(this).addClass('fancy');
});
5:
Change the polling interval to 100ms. This only works if $.elementReady() has not yet been called.
$.elementReady.interval_ms = 100;
I'm attempting to display a modal dialog as a test run before I try to perform a more difficult task. However, I seem to be doing something wrong as the code I copied from the demo site is not working when I set it up and run it locally.
Here is my source:
<html>
<head>
<script type="text/javascript" src="lib/jquery/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="lib/jquery/js/jquery-ui-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var $dialog = $('<div></div>')
.html('This dialog will show every time!')
.dialog({
autoOpen: false,
title: 'Basic Dialog'
});
$('#opener').click(function() {
$dialog.dialog('open');
});
});
</script>
</head>
<body>
<button id="opener">Press</button>
</body>
</html>
So far, I have primarily been thinking the problem may have been a relative path problem with the way I'm bringing in the external libraries. But I tried variations, and nothing changed.
I am still new to Javascript, so I may be doing some very noob-ish here. Any help would be appreciated. Thank you.
Here are some things you could try firstly add a link tag for the css
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" type="text/css" rel="stylesheet"/>
secondly make sure that you have the dialog component selected in your custom ui js package.
$(document).ready(function() {
var $dialog = $('<div></div>').appendTo(document.body);
});