popup close icon click event custom - javascript

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....

Related

close and reopen modal extra click event trigger again when I do click on toggle button (in re-opened modal)

I have a modal that open and close properly but when I re-open the modal, and do click on toggle button extra click event fire(means total two click event on single click).
//open modal close modal
$("#my-id").modal('show', {
backdrop: 'static'
});
$("#my-id").modal('hide');
//toggle button code
<input id="togle" type="checkbox" data-toggle="toggle" >
//javascript
$('#togle').change(function() {
if ($(this).prop('checked') == true) {
$(this).val("1");
} else {
$(this).val("0");
}
});
toggle button click to add $('#my-id').modal('toggle');
Try This :
//open modal close modal
$("#my-id").modal('show', {
backdrop: 'static'
});
$("#my-id").modal('hide');
//toggle button code
<input id="togle" type="checkbox" data-toggle="toggle" >
//javascript
$('#togle').change(function() {
if ($(this).prop('checked') == true) {
$(this).val("1");
} else {
$(this).val("0");
}
$('#my-id').modal('toggle')
});

Sending the next element of the clicked button into jQuery UI dialog box

After trying to animate an element, when clicking on a button using this script:
$(document).ready(function()
{
$("#oone, #otwo, #othree, #ofour, #ofive, #osix, #oseven, #oeight, #onine, #oten, #otwelve, #otwenty, #othirteen, #ofourteen, #ofifteen, #osixteen, #loone, #lotwo, #lothree, #lofour, #lofive, #losix, #loseven, #loeight, #lonine, #laaten, #lotwelve, #lotwenty, #lothirteen, #lofourteen, #lofifteen, #losixteen").click(function()
{
// $(this).css('border', "solid 2px red");
// var divs = $("#div_one, #div_two, #div_three, #div_four, #div_five, #div_six, #div_seven, #div_eight, #div_nine, #dive_ten, #div_eleven, #div_twelve, #div_thirteen, #div_fourteen, #div_fifteen, #div_sixteen, #div_lone, #div_ltwo, #div_lthree, #div_lfour, #div_lfive, #div_lsix, #div_lseven, #div_leight, #div_lnine, #dive_lten, #div_leleven, #div_ltwelve, #div_lthirteen, #div_lfourteen, #div_lfifteen, #div_lsixteen");
// $(divs).siblings().slideToggle();
$(this).next().slideToggle();
$(this).siblings().slideToggle();
});
});
I've got some animation unwanted result. So I decided, instead of animating the next element of the clicked button, why I don't send the result into dialog bix using jQuery UI plugin. So I tried the following:
<script src="../include/jquery-1.12.1.min.js"></script>
<script src="../include/jquery-ui.min.js"></script>
<script src="../include/bootstrap.min.js" type="text/javascript"></script>
$(document).ready(function() {
$("#oone, #otwo, #othree, #ofour, #ofive, #osix, #oseven, #oeight, #onine, #oten, #otwelve, #otwenty, #othirteen, #ofourteen, #ofifteen, #osixteen, #loone, #lotwo, #lothree, #lofour, #lofive, #losix, #loseven, #loeight, #lonine, #laaten, #lotwelve, #lotwenty, #lothirteen, #lofourteen, #lofifteen, #losixteen").click(function() {
$(this).next().dialog({
autoOpen: false,
hide: "puff",
show: "slide",
width: 800,
modal: true
});
//$(this).dialog("open");
});
});
And here is the html code for only the first 2 buttons, because the cod is too long:
<div class="form-group col-md-12">
<input class="img1" type="image" style="width:60px;height:60px" src="../images/molar_left_t.png" id="oone" name="one" alt="button" />
<div id="div_one" class="collapse">3rd Molar:
<?php echo $resTeeth['one'] ?>
</div>
<input class="img1" type="image" style="width:60px;height:60px" src="../images/molar_left_t.png" id="otwo" name="two" alt="button" />
<div id="div_two" class="collapse">
<?php echo $resTeeth['two'] ?>
</div>
So I had this error:
jquery-1.12.1.min.js:2 Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'open'
How to fix this error, and is it possible to send the next() div element into dialog box using jQuery UI, or should I specify id for each div, and create a dialog script for each one of them ?
Your problem is, you're creating the dialog from the next div, but you're trying to open the dialog on the CURRENT div.
You can fix this pretty easy:
$(document).ready(function() {
$("#oone, #otwo, #othree, #ofour, #ofive, #osix, #oseven, #oeight, #onine, #oten, #otwelve, #otwenty, #othirteen, #ofourteen, #ofifteen, #osixteen, #loone, #lotwo, #lothree, #lofour, #lofive, #losix, #loseven, #loeight, #lonine, #laaten, #lotwelve, #lotwenty, #lothirteen, #lofourteen, #lofifteen, #losixteen").click(function() {
var dialog = $(this).next();
dialog.dialog({
autoOpen: false,
hide: "puff",
show: "slide",
width: 800,
modal: true
});
dialog.dialog("open");
});
});
I made the assumption you want the dialog to contain the contents of the next (following) div.
This would do that:
$(document).ready(function() {
var dialog = '<div class="mydialog" title="Basic dialog"><p class="dialogcontent">me</p></div>';
var newDiv = $(dialog);
newDiv.dialog({
autoOpen: false,
hide: "puff",
show: "slide",
modal: true,
buttons: {
Ok: function() {
$(this).dialog("close");
}
}
});
$(".form-group").on('click', ".img1", function() {
var me = $(this);
newDiv.find('.dialogcontent').html(me.next('.collapse').html())
newDiv.dialog("open");
});
});
Example in action: https://jsfiddle.net/89pyhsuj/

Hide Button using Jquery Dialog

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();

How to Window.Open inside a jQuery Modal

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

JavaScript confirm box with custom buttons

Can I write a custom confirm box in JavaScript that, instead of the default OK and CANCEL button, shows a SAVE and DELETE button?
Use the jQuery UI Dialog Box for this.
You can do something like this:
JS:
$(function() {
$("#dialog-confirm").dialog({
resizable: false,
height: "auto",
width: 400,
modal: true,
buttons: {
"Do it": function() {
$(this).dialog("close");
},
Cancel: function() {
$(this).dialog("close");
}
}
});
});
<link href="https://jqueryui.com/jquery-wp-content/themes/jquery/css/base.css" rel="stylesheet"/>
<link href="http://jqueryui.com/jquery-wp-content/themes/jqueryui.com/style.css" rel="stylesheet" />
<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.js"></script>
<div id="dialog-confirm" title="Is it treason, then?">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;"></span>Am I the Senate?</p>
</div>
Not with the native JavaScript confirm box. You could use one of the many JavaScript UI components that emulate modal dialogs to do this instead.
Here's an example: https://jqueryui.com/dialog/#modal-confirmation
I've never used this so use at your own risk.
$('confirm text').dialog(
{
modal:true, //Not necessary but dims the page background
buttons:{
'Save':function() {
//Whatever code you want to run when the user clicks save goes here
},
'Delete':function() {
//Code for delete goes here
}
}
}
);
This should work, but you will need to download or link to jQuery and the jQuery UI libraries to run this.

Categories