Does anyone know a jQuery plugin just like an ads popup that can show information? I want it to show it the page and put a search form area on it so that the client can search on the dialog box.
Here is a popup in jQuery
all you have to do is change the content in the div
you could execute the script on load or when a link or button is clicked to do this you have to change the function
resources
https://jqueryui.com/dialog/
<script>
$(function() {
$( "#dialog" ).dialog();
});
</script>
<body>
<div id="dialog" title="Basic dialog">
<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>
</body>
Related
I am pretty much new to Jsp stuff. What I am trying to achieve is to show contents of another jsp page lets say help.jsp in service.jsp page but only when user click ? image (? image represents help). I want to show the contents of help.jsp in a popup window and also at the same time want the main screen to fade out or non intractable.
Here is what I am doing so far. I have created a div in service.jsp
<div id="dialog" title="Basic dialog">
</div>
and created a javascript function
function openDialog() {
$("#dialog").load('/myaccount/registration/help.jsp').dialog({modal: true});
}
My anchor tag looks like this
<a tabindex="1005" href="#" onclick="openDialog();" onMouseOver="window.status='Launch Help Window'; return true" onMouseOut ="window.status='';return true"><span class="WhiteBody"><img src="images/icon_help.gif" border="0"></span></a>
When I click help button it redirect to a blank page.
Please help me !
In your HTML,
<button id="myButton">click!</button>
<div id="dialog" title="Dialog box">
My content // Have to add your jsp page here
</div>
And in your Script,
$(function() {
$("#dialog").dialog({
autoOpen: false,
modal: true
});
$("#myButton").on("click", function(e) {
e.preventDefault();
$("#dialog").dialog("open");
});
});
See the Fiddle for working sample.
Automatic appear the popup window basen on condition like When i get the url http://localhost:81/Try/demo?result=false.
Below the sample code.I am using colorBox popup. It will show the popup window when i'm click the link Inline HTML.
I need automated popup if ($_REQUEST['result']==false) in PHP
<script src="../jquery.colorbox.js"></script>
<script>
$(document).ready(function(){
$(".inline").colorbox({inline:true, width:"50%"});
});
</script>
</head>
<body>
<h1>WELCOME</h1>
<p><a class='inline' href="#inline_content">Inline HTML</a></p>
<!-- This contains the hidden content for inline calls -->
<div style='display:none'>
<div id='inline_content' style='padding:10px; background:#fff;'>
<p><strong>This content comes from a hidden element on this page.</strong>
</p>
<p>The inline option preserves bound JavaScript events and changes, and it puts the content back where it came from when it is closed.</p>
Click here to download file</p>
</div>
</div>
</body>
I don't know what you mean by 'popup', but here is how to do something in javascript if 'result' is false.
<script>
<?php if($_REQUEST["result"]=="false") {
echo "alert('result is false')";
}?>
</script>
It is also possible to do this in JavaScript like so:
if (document.location.query.indexOf('result=false') !== -1) {
alert('result is false');
}
You would need some sort of modal implementation if you want to show a whole modal (ie Bootstrap Modal, jQuery UI Modal, custom, etc).
A simple search on Google for popup scripts brings out thousands of results for popup plugins.. But I believe something this simple shouldnt need a plugin.
I want a simple popup script with no overlay that does basically 3 things:
Opens on the click of a button
Closes on the click of a cross
Is centered on the screen and is fixed
<div class="member-pop" id="member-pop1">
<a class="member-close1 cross"><img src="img/pop/pop-cross.png"
alt="Close" /></a> <! -- This will close Popup -->
<p>Content inside popup</p>
</div>
What I have done so far
$('.pop-member1').click(function() {
$('#member-pop1').show();
});
$('.cross').click(function() {
$(this).parent().hide();
});
This achieves 1 and 2. Number 3 still not achieved yet
$( "#member-pop1" ).dialog();
<div id="member-pop1" title="My dialog">
<p>This is where you show the content. Click on cross to close me!</p>
</div>
Makes use of jquery ui dialog.
I'm loading a dialog from another page using load. I'm trying to load it inside a DIV. Now i need only the dialog box area to be added inside my div , not the entire blank space that are present in the page from which i load the dialog. how can it be done ?
$(document).ready(function(e) {
$('#content').load('dialog.html');
});
HTML
<div id="content">
</div>
Dialog.html
$(document).ready(function(e) {
$('#wrapper').dialog({
appendTo:'#content'
});
});
<body>
<div id="wrapper">
</div>
</body>
i tried load('dialog.html div') , but still the blank space also gets added !
You may try this:
$(document).ready(function(e) {
// initialize dialog
var dialog1 = $("#content").dialog({
autoOpen: false
});
// load content and open dialog
dialog1.load('dialog.html #wrapper').dialog('open');
});
if u just want to load the "wrapper div" then use this $("#content").load("dialog.html #wrapper");
i use dialog box without dialog ui for show erorr event in web page
<div id="downloadcredit" style="width:100%;position:fixed;height:100%;min-height:overflow:hidden;background-color:rgba(127,127,127,0.4);display:none;" >
<div style="text-align:right;width:466px;position:absolute;left:0;right:0;height:337px;min-height:overflow:hidden;background:url(images/creditbase.png);color:black;margin-left:auto;margin-right:auto;top:200px;font:16px behzad;">
<div style="width:100%;height:40px;background:transparent;font:20px behzad;padding-top:8px;color:#818181;text-align:center;"><span style="float:right;font:12px tahoma;font-weight:bold;color:#75797A;margin-right:15px;cursor:pointer;margin-top:6px;" onclick="$('#downloadcredit').slideUp('slow');">X</span></div>
<div style="margin:175px auto 10px;width:95%;font:11px tahoma;text-align:center;color:white;line-height:165%;">
<p> Erorr Sample ...
</div>
</div>
</div>
<body onload="$('#downloadcredit').slideDown('1000');">
but my page is Slow loading and 3 or 4 second after page complete loaded dialog show :( .
any way for show dialog first and page load in background?
I usualy apply the style "display:none" to the target container, then you can use the .load() function and use the callback to show your container filled with data.
Basically :
$('#target').hide();
$('#target').addClass("loading-layer");
$('#target').load('toto.php',function(){
$('#target').removeClass("loading-layer");
$('#target').show();
});