I use jQuery Dialog on ASP.NET C#. When I click button "Show dialog", the dialog is appeared and button "Show dialog" also display on dialog.
I want to hide this button. Please help me.
This is my code:
<script type="text/javascript">
$(".printt").live("click", function () {
$("#dialog").dialog({
title: "Password Confirm",
buttons: {
Ok: function () {
$("[id*=btnWhatch]").click();
},
Close: function () {
$(this).dialog('close');
}
},
});
return false;
});
</script>
And ASPx
<div id="dialog">
<dx:ASPxButton ID="ShowDialog" CssClass="printt" runat="server" Text="Show Dialog">
</dx:ASPxButton>
</div>
Thank for your help !
Just hide the button after the Show dialog button is clicked.
$('#ShowDialog').hide();
Related
Jquery popup close icon click event is not working?
http://jsfiddle.net/ymssceqv/1888/
JS:
//Set up the dialog box
$("#myDialog").dialog({
autoOpen : false,
modal : true,
title : "A Dialog Box"
});
//Open the dialog box when the button is clicked.
$('#clickMe').click(function() {
$("#myDialog").dialog("open");
});
$(document).on('click', '#myDialog .ui-dialog-titlebar-close', function (e) {
e.preventDefault()
alert('you clicked the x!');
});
You can set z-index for below divs. So that close event will be called on close button.
.ui-front{
z-index: 1;
}
#myDialog{
z-index: 2;
}
You can use beforeClose property of the dialog box:
$("#myDialog").dialog({
autoOpen : false,
modal : true,
title : "A Dialog Box",
beforeClose: function () {
customFunction();
}
});
function customFunction() {
alert('Custom function called');
}
I don't know how to modify the behaviour of the default close button. But a workaround is hiding that button and adding a new one:
$("#myDialog").dialog({
dialogClass: "no-close", // Add a class to hide default close button
buttons: [ //Add your own button
{
text: "New button",
click: function() { //Add your own click event
test();
}
}
],
autoOpen: false,
modal: true,
title: "A Dialog Box"
});
//Open the dialog box when the button is clicked.
$('#clickMe').click(function () {
$("#myDialog").dialog("open");
});
function test() {
alert("close icon clicked");
//Some function script...............
}
/* Hide default button */
.no-close .ui-dialog-titlebar-close {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div id="myDialog">
This is the content of my modal dialog box
<input type="text" id="myTextBox" />
</div>
<button id="clickMe">Click Me</button>
In this way you can have a button, but in a different position. You can play with css to move it if you like.
Anyway, I don't understand why you want a dialog that doesn't close....
So there's a few pieces to this. First of all, here's the Javascript located in the head of the ASPX page:
<!--//**********************************
// Test modal popup
//********************************** -->
<script type="text/javascript">
//Total out of range dialog
$(function () {
$("#dialog").dialog({
modal: true,
// autoOpen: false,
width: 570,
buttons: {
"Ok": function () { $(this).dialog("close"); },
"Cancel": function () { $(this).dialog("close"); }
}
});
});
</script>
Then, at the very bottom of he ASPX page (which is rather lengthy...) I have the modal piece:
<div id="dialog" title="ATTENTION">
<table style="width:565px; border-spacing:0px; border-collapse:collapse;">
<tr>
<td style="width:65px; ">
<img src="http://someimage" style="height: 120px; width: 80px" />
</td>
<td style="vertical-align:top">
<p>some text</p>
</td>
</tr>
</table>
</div>
</asp:Content>
Lastly, in the code-behind I have this:
if (!Page.IsPostBack)
{
if (MyServer.Contains("localhost"))
{
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "dlgOutOfRange",
"$(function() {$('#dialog').dialog('open');});", true);
}
Now, I know this all works, it's been tested. However, this modal is displaying even when it's not supposed to, and when I skip through the code it bypasses the Page.IsPostback so it knows it's not a postback. For instance, I have a dropdown that has a SelectedIndexChange function tied to it. When I change the value in the dropdown, this modal becomes visible. Is there something in the div tag that I'm not doing? I tried adding style="Visible: False;" but that just made the text invisible.
<script type="text/javascript">
$(document).ready(function () {
$("#dialog").dialog({
modal: true,
width: 570,
buttons: {
"Ok": function () { $(this).dialog("close"); },
"Cancel": function () { $(this).dialog("close"); }
}
});
});
</script>
Try this..
I have a c# Asp.net Gridview with some data and then there is a details page for each row of data with a hyperlink to view the details page. What is the best (easiest) way to show a popup using jquery modal box after clicking on the "Show Details" for any particular row of data?
So for example the page "details.aspx?id=10012" would popup in a modal dialog after clicking a "Show Details" hyperlink
An example where I am passing CustomerID as QueryString to another page
Step 1 - Create an ItemTemplate in your page like this.
<ItemTemplate>
<asp:HyperLink ID="DetailsLink" runat="server"
CssClass="my_link"
Text="View Details"
ToolTip='<%# Eval("CustomerID") %>'
NavigateUrl="#">
</asp:HyperLink>
</ItemTemplate>
Step 2 - Place a div outside the GridView like this.
<div id="dialog">
<iframe id="myIframe" src=""></iframe>
</div>
Step 3 - JS
$(document).ready(function () {
$("#dialog").dialog({
autoOpen: false,
modal: true,
height: 600,
open: function (ev, ui) {
$('#myIframe').attr('src', 'Popup.aspx?id=' + selectedID);
}
});
var selectedID = "0";
$('.my_link').click(function (event) {
selectedID = this.title;
event.preventDefault();
$('#dialog').dialog('open');
});
});
The code is self explanatory. Hope this helps.
I have my Modal Div as:
<div id="dialog-modal" title="Open File">
<img alt="progress" src="images/ajax-loader.gif"/>
</div>
On Click of Button I am able to see Modal and then see the progress icon.
<script type="text/javascript">
$(function () {
$('#button1').click(function () {
$('#dialog-modal').dialog("open");
});
$("#dialog-modal").dialog({
autoOpen: false,
height: 140,
modal: true,
});
});
</script>
But How can I do a operation or function on Load of Modal Window??
Let's say , I want to download a file from server , when the modal window appears (..showing the progress icon)
You can hook into the dialogopen function:
$( "#dialog-modal" ).on( "dialogopen", function( event, ui ) {
console.log('Wayhay!!');
window.open("http://www.google.com");
} );
See jsFiddle:
http://jsfiddle.net/3Y63f/1/
Further info here:
http://api.jqueryui.com/dialog/#event-open
I have a gridview which lists items. What i want to be able to do is click a link which will open a pop up to show further details for the specific item. So far I have managed to create a pop-up Div tag which will show the details of the product that is selected in the grid view. Currently the Div tag is opened using a hyperlink outside of the Gridview. When i try to put the link inside a template field in the gridview the pop up does not open.
This is the javascript for the pop up div
<script type="text/javascript">
$(document).ready(function () {
$("#OpenDialog").click(function () {
$("#dialog").dialog({ modal: true, height: 400, width: 500 });
});
});
</script>
The div tag
<div id="dialog" title="CPU Details" onload="false" style="display: none" >
The div tag is then opened using the following which is placed outside of the gridview.
<a id="OpenDialog" href="#">Click here to open dialog</a>
Do it this this way to see the wonders of css selectors.
Mark Up
<ItemTemplate>
<asp:LinkButton ID="lblId" runat="server" Text='<%# Bind("Id") %>' CssClass="opener"></asp:LinkButton>
</ItemTemplate>
<div class="dialog" title="My details" >
Details here
</div>
JqueryCode
$(document).ready(function () {
$(".opener").click(function () {
$(".dialog").dialog("open");
return false;
});
});
I have dropboxed a working example for you here which has a bonus of taking care of update panels.Enjoy.
try the following:
$(document).ready(function () {
$("#OpenDialog").click(function (e) {
$("#dialog").dialog({ modal: true, height: 400, width: 500 });
return false;
});
});
and let me know if it will not work for you.
UPDATED
add a class to link like :
<a id="OpenDialog" class="OpenDialog" href="#">Click here to open dialog</a>
now
$(document).ready(function () {
$('.OpenDialog').click(function (e) {
$("#dialog").dialog({ modal: true, height: 400, width: 500 });
return false;
});
});
try this it will definitely work for you as when ids of control have changed in gridview when it renders in html.