I have a button on my web page. once I click on the button a pop-up will appear with some text. here I need to display another HTML page in that pop-up
I have given my code below please help me
<!doctype html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500">
<link type="text/css" rel="stylesheet" href="popModal.css">
</head>
<body>
<button id="notifyModal_ex1" class="btn btn-primary">Example</button>
<div id="content2" style="display:none">
ghjgh
</div>
<script src="popModal.js"></script>
<script>
$(function(){
$('#notifyModal_ex1').click(function(){
$('#content2').notifyModal({
duration : 1500,
placement : 'center',
overlay : true,
type : 'notify',
onClose : function() {}
});
});
});
</script>
</body>
</html>
Try using jQuery's load():
$('#content2').load("page/url").notifyModal()
To show a loading message:
$('#content2').text("Loading, please wait...").load("page/url").notifyModal()
Or to open the modal when load ends:
$('#content2').load("page/url", function() {
$('#content2').notifyModal();
})
As described in load() docs:
Load data from the server and place the returned HTML into the matched element.
So it will load an html response and append it to the target element.
Related
I have a simple request for you brainies today. What i am trying to do is to activate a pop-up inside PHP tags. I have tested to see if the pop-up works by itself, and it does. My problem is the button, i have used the same setup elsewhere, but this time no cigar. I have also tried echoing the button inside the PHP tags but nothing happens.
My code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="Lib\JqueryUIcss.css">
<script src="Lib\Jquerylib.js"></script>
<script src="Lib\JqueryUI.js"></script>
</head>
<body>
<button type=" button" class="LeButton"> Clicky Clicky!</button>
<?php
if(isset($_POST['LeButton'])){
echo'<script> $(function() { $( "#dialog" ).dialog(); }); </script>';
echo'<div id="dialog" title="Basic dialog">';
echo'<p>Image:</p>'; </div>';}
?>
</body>
</html>
I tried specifying it as a function aswell and added onclick() to the button to call that function, nothing happend either. Mind that this is the first time i am ever using Javascript/jQuery.
I (kindly) lauched a bit about the echo <script> part.
Allow me to write you a piece of code, with explanation and documentation:
HTML button:
<button type="button" id="LeButton" class="LeButton"> Clicky Clicky! </button>
&
<div id="dialog" title="Basic dialog" style="visibility:hidden"><p>Image:</p> <img src="http://placehold.it/50x50" alt="Placeholder Image" /></div>
Explanation:
Your button needs an id value. Which is called 'LeButton' in this example.
Documentation:
https://www.w3schools.com/tags/att_id.asp
jQuery part:
<script>
jQuery(document).ready(function() {
/**
* #version 1.0.0.
*
* Do magic on button click 'LeButton'
*/
$("#LeButton").click(function() {
$("#dialog").css("visibility", 'visible'); // make the div visible.
$("#dialog").dialog(); // Post here your code on forexample poping up your modal.
});
});
</script>
Explanation:
Your tag can be placed on the bottom of your page. Your browser will 'read' the whole page. By saying '(document).ready', your script will be executed once the page has been red by your browser.
For the '.click' part it's a jQuery function you can use. So which
means: once id attribute 'LeButton' (#) is clicked, jQuery will
execute a function, which will alert text in this case.
Documentation:
https://api.jquery.com/click/
Note: Make sure you have jQuery included/enabled.
Link:
https://jquery.com/download/
Note from Simon Jensen:
You should elaborate that the Class-attribute is for styling and the
Id-attribute can be for whatever code or identifying purposes and are
unique. Therefore should people be careful with styling with the
Id-attribute as things might conflict at some point. The ID-attribute
is used to interact with the "#LeButton" attribute.
The PHP can't be run from the client. If you want the dialog to be shown onclick of the button, you must send the element before it's clicked, at the moment when it is sent to the client. You should have the dialog element hidden until the user clicks the button. It could be something like:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="Lib\JqueryUIcss.css">
<script src="Lib\Jquerylib.js"></script>
<script src="Lib\JqueryUI.js"></script>
</head>
<body>
<button type=" button" class="LeButton" onclick="$('#dialog').dialog()"> Clicky Clicky!</button>
<div id="dialog" title="Basic dialog" style="display:none">
<p>Image:</p>
</div>
</body>
</html>
You could also change the onclick attribute to a script in the head like this:
<script>
$(function() {
$(".LeButton").click(function() {
$('#dialog').dialog();
});
});
</script>
I recommend you to change the class of the button for an id, and then using #LeButton instead of .LeButton
You can handle this on the client-side without the need to use PHP to do so you need to give your button a unique identifier so whenever the button is clicked you can open the dialog using a simple evenlisener like so:
var dialog = $( "#dialog-form" ).dialog({
autoOpen: false,
height: 400,
width: 350,
modal: true,
close: function() {
// do stuff here whenever you close your dialog
}
});
document.getElementById('my-button').addEventListener('click', function () {
dialog.dialog('open');
});
#dialog-form {
background-color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<button type=" button" id="my-button" class="LeButton"> Clicky Clicky!</button>
<div id="dialog-form">
Name: <input><br/>
Password: <input type="passowrd">
</div>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="Lib\JqueryUIcss.css">
<script src="Lib\Jquerylib.js"></script>
<script src="Lib\JqueryUI.js"></script>
</head>
<body>
<form action="index.php" method="POST" enctype="multipart/form-data">
<input type="hidden" name="LeButton" value="an_arbitraty_value">
<input type="submit" class="LeButton">
</form>
<?php
if(isset($_POST['LeButton'])){
echo'<div id="dialog" title="Basic dialog">';
echo'<p>Image:</p></div>';
}
?>
</body>
</html>
When you load the html page $_POST['LeButton'] is not set. Therefore the intended dialog box wil not be generated in the page. In order to have $_POST['LeButton'] set, you should pass it to the html page first, hence the form I added.
Alternatively you could go for a full javascript solution like so:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
.hidden { display: none }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<button type=" button" class="LeButton" onclick="showDialog();">
Clicky Clicky!
</button>
<div id="dialog" title="Basic dialog" class="hidden">
<p>
This is the default dialog which is useful for displaying information.
The dialog window can be moved, resized and closed with the 'x' icon.
</p>
</div>
<script>
function showDialog() {
$( "#dialog" ).dialog();
};
</script>
</body>
</html>
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();
In my code, there is a lot of image in a table. I want to click a photo & then the photo will popup in a large size over the screen. But I do not have much idea about javascript & jquery. I try to do this but the problem is it popup a box but don't show the picture. I know that there is a problm in script to show the picture. can u please tell me where is the wrong or give me a proper code for popup image after click.
my header link is below. is there need any other link to be added??
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.4.2.min.css" />
<script type="text/javascript" src="http://w2ui.com/src/w2ui-1.4.2.min.js"></script>
here is html part:
<div>
<td> <img class="btn" onclick="popup()" style="width:100px; height:100px; border-radius:4px;" src="upload/<?php echo $row['image'];?>"></img></td>
</div>
here is the javascript:
<script type="text/javascript">
function popup() {
w2popup.open({
title: 'Image',
body: '<div class="w2ui-centered"><img src="upload/<?php echo $row['image'];?>"></img></div>'
});
}
</script>
can anyone please help me how to show image in the pop up box. thanks in advance.
Instead of the onclick attribute, you could assign a class popup_image to your img and attach a click handler when the DOM is ready.
I took the liberty to remove scripts and tags that were not neccessary to demonstrate the result.
$(document).ready(function() {
$(".popup_image").on('click', function() {
w2popup.open({
title: 'Image',
body: '<div class="w2ui-centered"><img src="' + $(this).attr('src') + '"></img></div>'
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="http://w2ui.com/src/w2ui-1.4.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.4.2.min.css" />
<img class="btn popup_image" style="width:100px; height:100px; border-radius:4px;" src="http://lorempixel.com/g/200/200/"></img>
Replace your jquery with below any try:
<script type="text/javascript">
function popup() {
var image = $(this).attr('src');
w2popup.open({
title: 'Image',
body: '<div class="w2ui-centered"><img src="'+image+'"></img></div>'
});
}
</script>
I assume the images are displayed properly which you will click
I would recommend using Colorbox by Jack Moore. It uses JQuery, and is very customizable.
Colorbox: http://www.jacklmoore.com/colorbox/
Demo: http://www.jacklmoore.com/colorbox/example1/
If you aren't opposed to using PHP, you also may want to check out UberGallery. It uses colorbox internally and can be used simply with
<?php include_once('UberGallery.php')
UberGallery::init()->createGallery("path to dir","name of gallery");
?>
I am trying to call a jquery (avgrund) modal window plugin on page load but I am not sure how to do it, here is what I have so far; the page for the plugin calls the plugin on button click but I wan't it to execute on page load...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" class="no-js">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="AvgrundModal/avgrund.css" />
</head>
<body>
<div id="avtest">NO RESULTS</div>
<!-- Include JavaScript file -->
<script src="AvgrundModal/jquery.avgrund.js"></script>
<script>
$(document).ready(function(){
$('#avtest').avgrund();
});
</script>
</body>
</html>
The link to the plugin is here...
http://labs.voronianski.com/jquery.avgrund.js/
Change this:
$('#avtest').avgrund();
for this:
$('#avtest').avgrund().trigger("click");
Just trigger the click event after initialization.
$(document).ready(function(){
$('#avtest').avgrund().click();
});
You're missing jQuery library here:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="AvgrundModal/jquery.avgrund.js"></script>
<script>
$(document).ready(function(){
$('#avtest').avgrund();
});
</script>
and also try to change:
$('#avtest').avgrund();
to:
$('#avtest').avgrund().click();
$(function() {
$('#avtest').avgrund({
height: 200,
holderClass: 'custom',
showClose: true,
showCloseText: 'Close',
enableStackAnimation: true,
onBlurContainer: '.container',
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>' +
'<div>' +
'Avgrund on Github' +
'Twitter' +
'Dribbble' +
'</div>'
});
$('#avtest').click();
});
openOnEvent option worked for me.
$(document).avgrund({
openOnEvent: false
});
I'm trying to create a dialog (on click) for feedback. I've tried simple things first.
Here's the fiddle
$("#feed_win").dialog({
autoOpen:false;
});
$("#feedback").click( function() {
$( "#feed_win" ).dialog( "open" );
});
But every time on load the dialog contains are shown before the button click event. Any help will be useful.
So, now i tried this.
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
$("#feedback").button().click(function() {
$("#feed_win").dialog("open");
});
$("#feed_win").dialog({
autoOpen: false,
modal: true,
height: 300,
width: 400
});
</script>
</head>
<body>
<button id="feedback">Delete profile</button>
<div id="feed_win">
<h2>This is feedback form</h2>
<p>You can add your feedback here</p>
</div>
</body>
But the dialog div is displayed on page load. why? It should be displayed after clicking button.
You need to include jQuery UI script in the head:
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
Here is fiddle: DEMO
Everything else you wrote is good, just add that line