Develop Reference

jQuery or javascript - how show a html page as dialog?

i just created a html page and designed it and its ready to use,
so what I need to do is to show it as dialog like :
$("#alertBtn").click(function(){
//show dialog
});

create a div with a certain ID with all the HTML you want inside.
For example
<div id="dialog">
<p>This is some tekst inside the dialog</p>
</div>
Then in your CSS set it's display property to none, like this:
#dialog{
display: none
}
In your click function, write the following:
$('#dialog').click(function(){
this.dialog();
});
I'm writing this out of my head, so it's possible you'll need to tweak it a little for it to work. If you type 'jquery dialog' into google, you'll also get lots of information like this: https://www.tutorialspoint.com/jqueryui/jqueryui_dialog.htm
Or you could try some of the comments, I'm pretty sure they all work too...
EDIT
Maybe it's better to initialize your dialog immediately and hide it using the .hide() jquery function. Like this:
$(document).ready(function(){
$('#dialog').dialog();
$('#dialog').hide();
}
When the user clicks your button, you then call the 'show'-function of jquery to show your dialog.
$('#someButton').click(function(){
$('#dialog').show();
}

Strange behaviour of browser console and jQuery function

I hide input["type"] for styling "browse file" button.
<input type="file" id="photoUpload" multiple style="display: none"/>
<button class="addFile" id="fakePhotoUpload"> </button>
I try trigger click on a hidden input["type"] via jQuery function
$('#fakePhotoUpload').click(function() {
$('#photoUpload').click();
});
This code performs and working like a charm.
But, if I call it function
$('#photoUpload').click();
from browser console (Google Chrome) nothing happens.
Who can explain this behaviour of console?

That's for security purpose, you cannot open browser file dialog
without any user interraction, In your example, a click made anywhere on the page.
If you could, then it should be fixed urgently!

This is not a solution but is very helpful:
jQuery(function ($) {
$('#fakePhotoUpload').click(function () {
$('#photoUpload').click();
});
$('#photoUpload').click(function(e){
alert('hi');//make your own dialog box here. use UI dialog box.
});
$('#photoUpload').click();
})
fiddle

jQuery mobile on click function

I am just starting with jQuery Mobile I want to create popup.
I found the following example on the jQuery Mobile site:
Open Popup
<div data-role="popup" id="popupBasic">
<p>This is a completely basic popup, no options set.<p>
Link button
Link button
</div>
That works very well. What I need now is to change that from an href to an onClick function like this below:
Open Popup
Its not working like that. What should I put to onClick to make it work?
Really appreciate your help.

You can use as below:
Create javascript function :
function openPopUp(){
$('#popupBasic').popup('open');
}
call openPopUp() in click event as below :
Open Popup
JSFiddle

Hide/show html content with javascript

I'm looking for javascript that will allow more HTML to appear on a website when a user clicks on an icon. I'm working on my first ever mobile design, and am building a prototype with html,css and javascript. Here is what I have so far: http://www.patthorntonfiles.com/snk_mobile
What I want to happen is when users click on the search icon at the top, a search box appears. I don't want the jquery accordion effect or something similar. I just want some HTML to appear and then disappear when a user clicks on the icon again or hits search.
Any recommendations for code or libraries for me to look at what be great. I don't need you to give me the code, but my Google searches aren't turning up exactly what I'm looking for.

Here's a non-jQuery solution:
document.getElementById("identifier").style.setProperty("visibility", "hidden");
and
document.getElementById("identifier").style.setProperty("visibility", "visible");

I know you said you don't want to use the jQuery accordion effect, but using jQuery to animate the opacity?. Please see below.
$("#idClicked").click(function() {
$("#searchBox").fadeTo("fast", 1);
});

jQuery's hide() and show() will do exactly that (they don't have any accordion effect, they just appear and dissapear with no ornaments).
$('#HtmlId').hide();
$('#HtmlId').show();
Additionally you get toggle(), to hide if shown and show if hidden:
$('#HtmlId').toggle();
---- Edit ----
After reading your comment, imagine you have the html:
<li><img id='hideShowIcon' src="patthorntonfiles.com/snk_mobile/search.gif"; width="50px'"/></li>
And the div to hide/show is:
<div id="search"> <gcse:search></gcse:search> </div>
Then you bind the click event to the image with the callback function performing the toggle:
$("#hideShowIcon").click(function() {
$('#search').toggle();
});
----- Edit 2-----
I saw your site and you don't have a document ready function. Basically it should look like this:
$(document).ready(function() {
$("#hideShowIcon").click(function() {
$('#search').toggle();
});
});
If you don't add this, jQuery tries to bind the action to an element that doesn't exist yet.

How can I have a textarea popup when the user clicks a button?

I've tried PopBox to have a textarea pop up, but the functionality of PopBox seems to be incompatible with the game system. (For example, I know for a fact that alert(); and prompt(); works in the html page testing, but does not happen at all in the actual game)
Currently the game has this confirm box system implemented. Is there a way to add a textarea to this?
If not, is there any other Jquery/JS tricks/plugins that will allow a textarea box to pop up when a button is clicked?

I'm no expert but I think this is possible:
<div id="textAreaDiv" style="visibility:hidden;"><textarea></textarea></div>
<input type="button" onClick="showTextArea()">
<input type="button" onClick="hideTextArea()">
<script>
function showTextArea() {
document.getElementById('textAreaDiv').style.visibility="visible";
}
function hideTextArea() {
document.getElementById('textAreaDiv').style.visibility="hidden";
}
</script>
OR...
To toggle the DIV with one button, you could do this:
<script>
function showHideTextarea() {
if (document.getElementById('textAreaDiv').style.visibility="hidden")
{
document.getElementById('textAreaDiv').style.visibility="visible";
}
else
{
document.getElementById('textAreaDiv').style.visibility="hidden";
}
}
</script>
And this doesn't need the JQuery library to use.
Hope it helps...

check this plugin
jAlert
very easy and clean to use, you can do whatever you want.
its easy to change the input by a textarea
in jquery.alerts.js file, search for 'prompt' case, and change the input by textarea.
i made this for me and have been working so far.

You can have a on the page, which inserts a textarea box when the button is clicked, something like this...
In original HTML page, stick a blank area, maybe reserving space like so
<div id="Input_Area">
<br>
<br>
</div>
Then, put an onClick event on your button which replaces the innerHTML with your textarea (or create a function that does it, and call it with your onClick event).

you can try jquery dialog http://jqueryui.it/demos/dialog.
This pops open an overlay and a dialog. You can customize this display and interaction to your hearts desire.