Will I be able to display a HTML content (not a file) in a pop up window using JS?
I am trying to open a pop up window and display an user defined HTML inside this. I am trying the below, but it doesn't work.
window.showModalDialog("<p>Pop up window text</p>","resizable: yes");
Can some one suggest me how to do this? Thanks in advance.
Contrary to window.open(), the first (URL) argument of showModalDialog() is required. Thus, you can't pass it an HTML string. You can either use window.open:
var newWindow = window.open("", "newWindow", "resizable=yes");
newWindow.document.write('<p>Pop up window text</p>');
Or alternatively, use one the existing modal plugins, such as jQuery UI Dialog or Twitter Bootstrap Modals. They allow you to easily display a modal window based on the content of an existing HTML element, e.g.:
<div id="dialog">
<p>Pop up window text</p>
</div>
$('#dialog').modal(); // Twitter Bootstrap
$("#dialog").dialog({ resizable: true }); // jQuery UI
Related
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'm looking for a way only use javascript to display a dialog , The dialog display include:
Title
(operation icon) Content
Button(OK)
But after I see the sample in the Jquery mobile document, Looks like If I want to display a dialog, I must use some html+css code, But I just want to use javascript only to display it.
The sample dialog already not support the new version Jquery mobile, it's not working.
the popup so ugly, only has content, not button like OK, also no close button.
So Is there any way can display a good dialog(not so simple like popup) only use javascript? Also can use Jquery.
jQuery Mobile Popups can absolutely handle your requirements. It is no problem to include titles, content, buttons, and a top corner close button. Additionally you can add the popup via script instead of markup in the page.
For example, if you have the following button on your page:
<button id="btnDynamic">Dynamic Popup...</button>
And you want to launch a dialog when it is clicked, your script could be something like this:
$("#btnDynamic").on("click", function () {
//create the popup markup
var html = CreatePopup("Dynamic", "This popup is created and launched entirely via script");
//append popup to DOM, tell jqm to enhance and initialize the popup
// and to remove the popup from DOM on close
$("#page1").append(html).find("#mypDialog").enhanceWithin().popup({
afterclose: function (event, ui) {
//remove from DOM on close
$("#mypDialog").remove();
}
}).popup("open", {
transition: "flow",
positionTo: "window"
});
//Add click handler for button in popup
$("#mypDialog").on("click", "#btnPopOK", function(){
alert("You clicked OK, I will now close the popup");
$("#mypDialog").popup("close");
});
});
function CreatePopup(title, content){
var html = '<div data-role="popup" id="mypDialog" data-overlay-theme="b" data-theme="a" data-dismissible="false" >';
html += '<div data-role="header"><h1>' + title + '</h1>Close</div>';
html += '<div role="main" class="ui-content"> <h3 class="ui-title">' + content + '</h3>Cancel<a id="btnPopOK" href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline" data-transition="flow">OK</a></div>';
html += '</div>';
return html;
}
I am creating the popup markup as a string. That string is then appended to the data-role="page" DIV. We then find the popup div (We assigned an id of myDialog to it) and tell jQM to enhance the content of the popup, initialize the popup widget with an afterclose callback that removes the popup from the DOM once closed, and finally the command to show the popup. I have also included a handler for the OK button click.
Here is a working DEMO. Note I have also included a static popup in the DEMO.
How can I create a new frame/window in the canvas? I am trying to make a game, and have a feature when you press a button, a menu screen will pop up displaying a bunch of information. Currently I have it working where you press a button and it will pop up with a placeholder image, which I would now like to replace.
I know in Java you would just create a new JFrame or JPanel, but how do you do this in JavaScript?
jQuery's modal dialog is popular:
http://jqueryui.com/dialog/
The jquery modal dialog window is an overlaying div element positioned within the viewport and is protected from page content (like select elements) shining through with an iframe. It has a title bar and a content area, and can be moved, resized and closed with the 'x' icon by default.
Define your popup window
You define the jquery dialog window by creating a div element containing your informational contents.
<div id="MyInfo" title="My Popup dialog">
<p id="myContent">Here is 'a bunch of information' and images too!<p>
<img src="anyImage.png">
</div>
Display your popup window
jQuery will initially hide your popup div. You can display the popup div like this;
$( "#MyInfo" ).dialog("open");
So if you want the popup to display when you press a button you can do this:
$("#myButton").click(function(){ $("#MyInfo").dialog("open"); });
And, Yes, you can get your desired contents through AJAX calls and then put that info into your the jquery popup.
$("#myContent").text("Here's some info from an AJAX GET request");
There are quite a few useful options that can be used with the jQuery dialog including animations and buttons.
Here I am facing a problem, I will explain:
I set up a calendar on my website, when I click on an event to this calendar I open a popup until the hopefully it works correctly, I would like to change the content of my popup by inserting values my event.
eventClick: function(calEvent, jsEvent, view) {
z=open('popup.html','','width=400,height=200,toolbar=no,scrollbars=no,resizable=yes,location=0,directories=no,menubar=no,status=no');
z.document.getElementById('test').append(toto);
},
Above me the code that opens my popup correctly I created a new file by "popup.html.
The last line does not work against ...
z.document.getElementById('test').append(toto);
I have an element with the id "test" in the HTML file of my popup. I also tried to generate the popum the fly from my script, I get this solution in a properly transmit information I want displayed in the popup io unfortunately I do not find a solution to the stylized popup window
w=open("",'popup','width=400,height=200,toolbar=no,scrollbars=no,resizable=yes');
w.document.write("<TITLE>"+document.forms[0].elements["titre"].value+"</TITLE>");
w.document.write("<BODY> Hello"+document.forms[0].elements["nom"].value+"<BR><BR>");
w.document.write("this popup work");
w.document.write("</BODY>");
w.document.close();
Do you have a solution to my / my problem?
Thank you in advance,
Good afternoon,
cordially
Do you really want a new window? Or do you only want a modal, like the jQuery.UI dialog?
In order to use the latter you usually prepare a <div>, e.g.
var myDialog = $("#toto");
myDialog.dialog({ autoOpen: false });
and use myDialog.dialog('open') to open it. Note that this will remove #toto from its parent. If you don't wish this behavior try var myDialog = $("#toto").clone().
You can then style the new dialog with the jQuery css methods.
On a given webpage I have a link that opens a modal window using Thickbox. In that window I have a form which I use to save some data. After I submit the form, I close the modal window. Now my question is: can I refresh the main page after closing the modal window?
Thank you.
Call this after the form is submitted and before the window is closed:
window.opener.location.reload();
Suppose this is the div you show in modal mode. You have to call tb_remove() to close the modal window. So just use location.reload(); before that call.
<div id="modalContent" style="display:none">
<form>
...
</form>
<p style="text-align:center">
<input type="submit" id="Login"value="Click to close"
onclick="window.opener.location.reload();tb_remove()" />
</p>
</div>
Actually Thickbox is no longer being maintained, so it might be better to use a different modal window. That being said, I know Facebox allows you to bind box open and close events like this:
$(document).bind('close.facebox', function() {
// do something here
})
If using facebox simply add window.location.reload(); around line 148, so you end up with something like...
close: function() {
$(document).trigger('close.facebox');
window.location.reload();
return false
}
If still using Thickbox I'm sure it's just as easy. Do a search for "close" and add the code.
You can do this easily with the tinybox plugin:
http://sandbox.scriptiny.com/tinybox2/
var parentWindow = window;
$('#submit-deed-button').click(function() {
TINY.box.show({iframe:'submit_deed.html', closejs:function(){parentWindow.location.reload()}, post:'id=16',width:385,height:470,opacity:20,topsplit:3, boxid:'tinybox_container'})
});
The key is to pass in the parent window to the function as a JS var then you call location.reload() on that object