I'm trying to replicate the example I see here
http://jqueryui.com/dialog/#animated with the following asp.net mvc view
#{
ViewBag.Title = "Partial";
}
<script>
$(function () {
$("#dialog").dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$("#opener").click(function () {
$("#dialog").dialog("open");
});
});
</script>
<div id="dialog" title="Basic dialog">
<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<button id="opener">Open Dialog</button>
#section scripts{
#Scripts.Render("~/Scripts/jquery-1.10.2.js")
#Scripts.Render("~/Scripts/jquery-ui-1.8.11.js")
}
but the jquery isn't firing, I'm not sure if I'm linking the jquery scripts right or what...
I've also tried this
<script src="#Url.Content("~/Scripts/jquery-1.10.2.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui.js")" type="text/javascript"></script>
on the top of the page but nothing
ultimately my goal is to use #Ajax.ActionLink (which is working for me) and then make the "div" that gets updated with the partial view into a modal popup. But for now, I can't get this modal working, I appreciate the help guys
It's the quotes
<script src='#Url.Content("~/Scripts/jquery-1.10.2.js")' type="text/javascript"></script>
<script src='#Url.Content("~/Scripts/jquery-ui.js")' type="text/javascript"></script>
Related
I am using google docs viewer to display word and PDF files in dialog in my application. But my client need that document should not get download. So want to hide 'Pop-out' option. Please help me for it. Below is my code snippet :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("#btnShow").click(function () {
$("#dialog").dialog({
modal: true,
title: '',
width: 750,
height: 450,
buttons: {
Close: function () {
$(this).dialog('close');
}
},
open: function () {
var object = "<iframe id='resViewer' src='https://docs.google.com/viewer?url=my_file.pdf&embedded=true' style='width: 700px; height: 700px;' frameborder='0'></iframe>";
$("#dialog").html(object);
}
});
});
});
</script>
<input id="btnShow" type="button" value="Show PDF" />
<div id="dialog" style="display: none">
</div>
Please help me.
If anyone knows any other way to display word and PDF file both give me way or suggest for this.
Thanks.
The following CSS will remove the pop out button.
div[aria-label="Pop-out"] {
display: none;
}
div["aria-label=toolbar"] {
width: 52px;
}
But to get the CSS to apply to the iframe your going to have to do some trickery. See jQuery, select element inside iframe, which is inside an iframe and How to apply CSS to iframe?
Here is the link:
<a href="1.php#filter=.element007">
Now i want 2.php, on load, to display this 1.php's content,
only that content which is inside
id="isotope".
This code seems to work, but only when i manually post the content inside class isotope from 1.php, to class grid of this page. If I use JS, God knows, why it stops working. Any Hints :
<html>
<head>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/isotope.pkgd.min.js"></script>
<script>
$(document).ready(function(){
$(".grid").load("1.php .isotope > *");
});
</script>
<script>
$( function() {
// init Isotope
var $grid = $('.grid').isotope({
itemSelector: '.element',
layoutMode: 'fitRows' ,
filter: '.lmd'
});
});
</script>
</head>
<body>
<h1>Isotope - filtering</h1>
<div class="grid"> </div>
<!--- /.grid --->
</body>
</html>
This question already has answers here:
jQuery UI - Close Dialog When Clicked Outside
(21 answers)
Closed 8 years ago.
I'm using jQuery dialog to make a pop up box but I can seem to get it to close on click anywhere off the box, I tried adding
closeOnContentClick: true
here is my code:
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#OpenDialog").click(function () {
$("#dialog").dialog({modal: true, height: 590, width: 1005, closeOnContentClick: false });
});
});
</script>
<a id="OpenDialog" href="#">Click here to open dialog</a>
<div id="dialog" title="Dialog Title">
<p>pop up</p>
</div>
Any advice on how to get the box to close when you click anywhere off of it?
Check this out it might be perfect for you.
http://jsfiddle.net/jasonday/6FGqn/
$('#open').click(function() {
$('#dialog').dialog('open');
});
<div id="dialog">Your non-modal dialog</div>
Open dialog
jQuery(document).ready(function() {
jQuery("#dialog").dialog({
autoOpen: false,
modal: true,
open: function(){
jQuery('.ui-widget-overlay').bind('click',function(){
jQuery('#dialog').dialog('close');
})
}
});
});
I am learning how to use jQuery dialog. One link I found helpful is http://imperavi.com/redactor/examples/uidialog/. The code is listed below, but I don't know why it does not work.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test Dialog</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<p>Open</p>
<div id="dialog-modal" title="Basic modal dialog" style="display: none;"></div>
<script type="text/javascript">
function showDialog()
{
$("#dialog-modal").dialog(
{
width: 600,
height: 400,
open: function(event, ui)
{
var textarea = $('<textarea style="height: 276px;">');
$(textarea).redactor({
focus: true,
autoresize: false,
initCallback: function()
{
this.set('<p>Lorem...</p>');
}
});
}
});
}
</script>
</body>
</html>
The dialog appears after adding jquery-ui and css, but "Lorem..." does not show.
One more thing... Is it possible to pass a string to "showDialog" such that it can show different content based on different link? For example, adding "Open 1" and "Open 2" to show different string?
I think, you forgot to add jquery UI.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test Dialog</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="path_to_jq_ui"></script>
</head>
<body>
<p>Open</p>
<div id="dialog-modal" title="Basic modal dialog" style="display: none;"></div>
<script type="text/javascript">
function showDialog(text)
{
$("#dialog-modal").html(text)
$("#dialog-modal").dialog(
{
width: 600,
height: 400,
open: function(event, ui)
{
var textarea = $('<textarea style="height: 276px;">');
$(textarea).redactor({
focus: true,
autoresize: false,
initCallback: function()
{
this.set('<p>Lorem...</p>');
}
});
}
});
}
</script>
</body>
</html>
Here is working fiddle: http://jsfiddle.net/bY3F4/3/
Download JqueryUI from here
Edit: Dynamic dialog content added to code
Dialog is a part of jQuery UI. You have to include it as well.
the Dialog is in the JQuery UI, you only required the JQuery.
insert this in the beginning:
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
Add jQuery UI Stylesheet
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.min.css" rel="stylesheet" />
Add jQuery + jQuery UI
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
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