What is the best way to replace
var value = prompt("Enter a URL", "http://www.google.com/");
by a javascript modal (preferably pure javascript, if not possible then jquery)
Thanks!
You will need to change theway you call it, so it now follows event-driven programming style like that:
function prompt(question, callback) {
// here build a modal/form and after form submit:
callback(prompt_value);
}
And then use it like that:
prompt('Enter a URL:', function(result){
// do something with the result:
alert(result);
});
For better alerts, you can use bootboxjs.
For a pure JS modal, you can check ModaliseJS which is compatible with any css classes.
Example of ModaliseJS (change the classes to your design, just keep one .close, .confirm and .cancel as you please) :
<!DOCTYPE html>
<html>
<head>
<title>Modal example</title>
<link href="../../dist/modalise.css" rel="stylesheet">
<script src="../../dist/modalise.js" type="text/javascript">
</script>
<script src="app.js" type="text/javascript">
</script>
</head>
<body>
<h1>Example modal 1</h1><button id="openModal">Show the modal</button>
<div class="mdl mdl-fadein" id="exampleModal">
<div class="mdl-content mdl-slidein">
<center>
<div class="mdl-header mdl-band-primary">
<span class="close">X</span>
<h2>Example modal</h2>
</div>
<div class="mdl-body">
<h3>Content modal</h3>
input data: <input type="text" class="inputdata"><br>
</div>
<div class="mdl-footer mdl-band-primary">
<button class="confirm" onclick="return false">Do
thing</button><button class="cancel" onclick=
"return false">Cancel the thing</button>
</div>
</center>
</div>
</div>
</body>
</html>
Javascript :
var myModal = {}
window.onload = function(){
var btnOpen = document.getElementById('queryData'); // The button to open the modal
// if btnsOpen is not given, you can simply use myModal.show()
// Modalise(id, options);
myModal = new Modalise('exampleModal', {
btnsOpen : [btnOpen]
})
.attach()
.on('onConfirm', function(){
console.log(this.querySelector(".inputdata").value);
});
}
Related
I am pretty new to JavaScript and frontEnd, I am trying to build a modal popup which asks for a form submission.Now what I am trying to do is to hide popup as soon the user clicks the submit button.
function openColorBox(){
$.colorbox({iframe:true, width:"50%", height:"50%", href: "new_greeting_form.html"});
}
setTimeout(openColorBox, 5000);
</script>
<script>
// if you want to use the 'fire' or 'disable' fn,
// you need to save OuiBounce to an object
var _ouibounce = ouibounce(document.getElementById('ouibounce-modal'), {
aggressive: true,
timer: 0,
callback: function() { }
});
$('body').on('click', function() {
$('#ouibounce-modal').hide();
});
$('#ouibounce-modal .modal-footer').on('click', function() {
$('#ouibounce-modal').hide();
});
$('#ouibounce-modal .modal').on('click', function(e) {
e.stopPropagation();
});
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>test</title>
<link rel="stylesheet" href="https://cdn.rawgit.com/jackmoore/colorbox/master/example1/colorbox.css" />
<link rel="stylesheet" href="\ouibounce.min.css">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
<script src="\ouibounce.js"></script>
<div id="ouibounce-modal">
<div class="underlay"></div>
<div class="modal">
<div class="modal-title">
<h3> </h3>
</div>
<div class="modal-body">
<h2>ThankYou for coming!!</h2>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</body>
</html>
Anyone please help me in this,I'm new and not getting how to proceed in this.
There's a bug in bootstrap that leaves the background fade in place - you can fix this by also adding the following after the modal hide:
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
use this line when the user submit the form
$('#yourmodal').hide();
on submit of your form use the below line to hide.
$('#ouibounce-modal').hide();
Here is the HTML:
<html>
<head>
<Script type = "text/javascript" src = "CprMdlrSrch.js"></Script>
<link type="text/css"rel="stylesheet"href="CprMdlrSrch.css"/>
</head>
<body>
<div id="main_box">
<p id="instructions"><strong>Please enter a part number to search.</strong></p>
<input id="part_num_search" type="text" name="searchPhrase">
<button id="search_button" type="button" value="button"> <strong>Search</strong></button>
<div id="results"></div>
<script type="text/javascript">
</div>
</body>
</html>
Here is the Javascript:
$(document).ready(function(){
$("#search_button").toggle(function() {
$("#part_num_search").fadeIn("slow");
},
$("#part_num_search").fadeOut("slow");
});
});
I am just unsure what I am doing wrong. I am really just trying to out the button to make sure I am on the right track.
thanks!
-Dustin
I'm not sure you understand how to use the toggle command. Please check out the API documentation: http://api.jquery.com/toggle/
For fade toggling, try .fadeToggle(), which started becoming available since JQuery 1.4.4.
http://api.jquery.com/fadeToggle/
Try something like this:
$(document).ready(function(){
$("#search_button").click(function() {
$("#part_num_search").fadeToggle("slow");
});
});
You'll be better served using http://api.jquery.com/fadetoggle/.
$("#search_button").click(function() {
$("#part_num_search").fadeToggle("slow");
});
Not sure why the open function is not getting called at the onclick even of the button.
Any help will be highly useful
<html>
<head>
</head>
<body>
<script>
function open(){
alert('gsfhdgf');
document.getElementById("overlay").style.display="block";
document.getElementById("fade").style.display="block";
}
</script>
<div id="fade" style="display:none">
<div id="overlay" style="display:none">
this is my content
</div>
</div>
<button onclick="open()">Click Me!</button>
</body>
</html>
open is already used as a function name (window.open, document.open...)
Name your function something else (preferably something meaningful) and it will work.
I'm making a prototype for a chat client. At this stage, I'm just learning how to append the user's input to the text area above. However, no matter what I do, it doesn't seem to work. The only time it actually functioned correctly was in jsfiddle, but I can't get it to work when I load my actual HTML page.
It's worth mentioning that, at the advice of a tutorial, I already tried placing the script tag for my JQuery code at the end of the body instead of in the head. The tutorial said that it was essential for all elements be allowed to load before the JQuery code, so that's the way it had to be. As you can see below, the script tags are currently in the head, but that doesn't work either.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="ChatStyle.css"/>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="Chat.js"></script>
<title>
Chat Client Prototype
</title>
</head>
<body>
<div ID="topBar">
</div>
<h2 ID="header">Chat Client</h2>
<div ID="chatBox">
<div ID="topBar2">
</div>
<div ID="header2">
Chat Client
</div>
<textarea ID="textArea" name="textArea">
</textarea>
<form ID="in">
<input ID="textField" type="text">
<button ID="send" type="button" name="Send" value="send">Send</button>
</form>
</div>
</body>
</html>
Chat.js
function sendText(){
$(document).ready(function () {
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
});
});
}
Don't wrap document ready handler inside sendText() function, use that instead:
$(document).ready(function () {
$('#send').click(sendText);
});
function sendText(){
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
}
Well, it work if you change your button to submit type and bind the event to form submit:
$('#in').submit(function () {
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
return false;
});
http://jsfiddle.net/AztSB/
This seems to work for me:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="ChatStyle.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').html($('#textArea').html() + text);
$('#textField').val('');
});
});
</script>
<title>
Chat Client Prototype
</title>
</head>
<body>
<div ID="topBar">
</div>
<h2 ID="header">Chat Client</h2>
<div ID="chatBox">
<div ID="topBar2">
</div>
<div ID="header2">
Chat Client
</div>
<textarea ID="textArea" name="textArea"></textarea>
<form ID="in">
<input ID="textField" type="text">
<input ID="send" type="button" name="Send" value="send"/>
</form>
</div>
</body>
</html>
Just don't wrap it in your function sendText:
$(document).ready(function () {
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
});
});
You dont need to put it in a function. You can just leave it to Jquery :)
Your stuff in a FIDDLE to see
Jquery:
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').append(text);
$('#textField').val('');
});
UPDATE
Use append() to update the textarea with new text!
It always seems to be a problem and I fail to see why, I'm trying to change element p text by using his ID, element p id="para1" is inside PostEditor.html:
The elementID I want to change is para1 in the following html:
<!DOCTYPE html>
<html>
<head>
<title>Editor</title>
<link href="styles/editor.css" rel="stylesheet" type="text/css" media="screen" />
<script src="scripts/mainScript.js"> </script>
</head>
<body>
<!-- Input fields -->
<div class="center">
<form id=caller method="post">
<p id="para1" class="text"><Strong>Post your message</Strong></p>
<textarea id="textEditor" rows="16" cols="34" name="content"></textarea>
<input type="submit" onclick="urlLoader('caller','posthandler.php')" value="Post">
</form>
</div>
<!-- end Input fields -->
</body>
</html>
The following function is issued by a click on a link inside index.html and displaying the page you are seeing above and is then supposed to change its content:
From index.html I issue the function from link:
<a onclick="postEditing()"> Edit</a>
This line issue the following function:
function postEditing()
{
var result = window.open('PostEditor.html', 'newwindow', 'width=350,' + 'height=350');
result.document.getElementById("para1").innerHTML = "11111111111";
result.document.getElementById("para1").innerText = "11111111111";
result.document.getElementById("para1").value = "11111111111";
}
As you can see I tried three methods. I'd never understand what is the difference between them, but I tried all three and none worked!
It's because you're searching the document of the window which shows the index.html, not the document of the newly opened window. try following:
...
var editorWindow = window.open('PostEditor.html', 'newwindow', 'width=350,' + 'height=350');
editorWindow.document.getElementById("para1").innerHTML = "11111111111";
...
EDIT:
NOW i see the problem: in the function you're trying to access a property of the parameter element, but you don't pass a value for it. So this will end in an error because the accessed object is undefinded!
So you have three options to get it working:
test the parameter (always a good idea): var ID = null; if(element) ID = element.id;
pass a value: <a onclick="postEditing(this)"> Edit</a>
remove the line var ID = element.id;
SOLUTION: (TESTED)
I could not really say why, but the index.html found the para1 and can successfully set the new text. But somehow the new window will reinitialize the old value again.
So you have to do the changing in an handler you run at onLoad:
index.html:
<html>
<head>
<script>
function postEditing() {
var result = window.open('PostEditor.html', 'newwindow', 'width=350,' + 'height=350');
result.onload = function() {
result.document.getElementById("para1").innerHTML = "11111111111";
}
}
</script>
</head>
<body>
<a onclick="postEditing()"> Edit</a>
</body>
</html>
PostEditor.html:
<!DOCTYPE html>
<html>
<head>
<title>Editor</title>
<link href="styles/editor.css" rel="stylesheet" type="text/css" media="screen" />
<script src="scripts/mainScript.js"> </script>
</head>
<body>
<!-- Input fields -->
<div class="center">
<form id=caller method="post">
<p id="para1" class="text"><Strong>Post your message</Strong></p>
<textarea id="textEditor" rows="16" cols="34" name="content"></textarea>
<input type="submit" onclick="urlLoader('caller','posthandler.php')" value="Post">
</form>
</div>
<!-- end Input fields -->
</body>
</html>
I'm fairly sure you will need to query the return result of calling window.open like this:
function postEditing(element)
{
var ID = element.id;
var result = window.open('PostEditor.html', 'newwindow', 'width=350,' + 'height=350');
result.getElementById("para1").innerHTML = "11111111111";
result.getElementById("para1").innerText = "11111111111";
result.getElementById("para1").value = "11111111111";
}
[Untested though]
Your button type is submit, which is posting the form. The object is changing in the DOM, only after the script runs, the DOM is reloaded back to it's original state. Try changing your button type to "button", and you should see the P element change appropriately.
Edit: Here's the HTML I used to determine the above. Keeping the button as "submit" caused me to see the text change and then swap back. The HTML below should keep the text in place. HTH!
<!DOCTYPE html>
<html>
<head>
<title>Editor</title>
<script>
function postEditing(element)
{
document.getElementById('para1').innerHTML = "asdafs";
}
</script>
</head>
<body>
<!-- Input fields -->
<div class="center">
<form id=caller method="post">
<p id="para1" class="text"><Strong>Post your message</Strong></p>
<textarea id="textEditor" rows="16" cols="34" name="content"></textarea>
<input type="button" onclick="postEditing('caller')" value="Post">
</form>
</div>
<!-- end Input fields -->
</body>
</html>