We Keep Coding

How to make a bootstrap modal window close when click outside again?

I'm working in a project using bootstrap framework and I read there are different ways to open a modal window, in my case I open it with javascript with this code:
$('#formVenta').modal({backdrop: 'static', keyboard: false});
I did this because the client asked me to avoid close the modal when click outside but now he wants to press click outside and close the modal again but when there is no content inside a specific div inside my window
<div id="content_goes_here"></div>
I think to solve this in this way
$(document).click(function(e) {
//check if modal is open
if ($('#formVenta').is(':visible')) {
//check if div has content
if ($('#content_goes_here').html().length > 0) {
//do something
}
}
});
The problem I see is that there are text input outside that div and If I want to search something it will close when I make click in the input because there will be not content yet inside the div and I want to avoid this issue.
Is there a way where only when I make click outside the modal window check if the div is empty and make the opposite of the way I opened the window in this case the opposite of this?
$('#formVenta').modal({backdrop: 'static', keyboard: false});
for example change the value of the property backgrop.
I hope you can help me, thanks.

sorry it took a while to find the right properties but here is the best example
$('#formVenta').data('bs.modal').options.backdrop = false; or
$('#formVenta').data('bs.modal').options.backdrop = static;
you can take a look at the current properties you have set by doing
alert(JSON.stringify($('#myModal3').data('bs.modal').options)); or change the alert to console.log()
so you can put an event on the div for when it changes to run the validation function and inside of the validation function you can change the options of the modal with the above code

Execute same function in all Controllers on the same event - AngularJS

I'm currently experiencing a problem with Bootstrap Modal, when changing views through the URL. ReloadOnSearch is disabled.
If I'm on a view such as:
blah.com/examples/1
and open up a Modal with a faded backdrop, then change the URL to change views such as:
blah.com/examples/2
the Modal window will close, but the faded backdrop will remain, and disable interaction to the web page.
I'm wondering if there is a way to define one function, which will programmatically remove the faded backdrop, which will execute on URL change, regardless of the controller in use.
Though the cause of the issue is due to AngularJS, the solution doesn't need to use AngularJS.

I had same issue, the solution is to remove that overlay class while your hashurl change
window.onhashchange = function() {
$(".lean-overlay").fadeOut(500); // whatever class name your overlay has
}

Use the event onhashchange to hide all modals on screen using the proper hide method:
window.onhashchange = function(event) {
$('.modal').modal('hide');
// You can even add some tests based on the new and old URL
console.log('new URL', event.newURL);
console.log('old URL', event.oldURL);
}

how to interact with ckeditor, by catching and handling events

I am new to ckeditor, I have hard time figuring this issue out.
due to my html design; if I try to use the link editor dialog while my ckeditor is maximized, it just doesn't show up, I understand that ckeditor is the top most object in my html page and the link dialog comes underneath it. if now I bring ckeditor to its normal state I will be able to see and use the link dialog.
my idea is to slightly override the link button click event as follows:
if the editor is in full screen mode, bring it back to the normal state. and keep a flag somewhere so that when I close the link dialog, I can decide whether to bring back the ckeditor to a maximized mode again. now this is easy logic except that I do not know how to override the click event of the link button and keep it work as expected.
here's what I have:
$().ready(function () {
var editor = $('#txa').ckeditor();
CKEDITOR.plugins.registered['link']=
{
init : function( editor )
{
var command = editor.addCommand( 'link',
{
modes : { wysiwyg:1, source:1 },
exec : function( editor ) {
if(editor.commands.maximize.state == 1 ){
alert("maximized");
//....here bring back the editor to UN-maximized state and let the link button event click do the default behavior
}
else
{
alert("normal state");
}
//2 is normal state
//1 is maximized
}
}
);
editor.ui.addButton( 'link',{label : 'YOUR LABEL',command : 'link'});
}
}
});
html part to make the exemple work:
<div>
<textarea id="txa">
</textarea>
</div>
TO BE SHORT:
http://jsfiddle.net/Q43QP/
if the editor is maximized, bring it to normal state then show the link dialog.

Use editor.execCommand('maximize') to toggle the state of the editor window.
http://jsfiddle.net/Q43QP/2/

Pass a value to a popup

Here I am facing a problem, I will explain:
I set up a calendar on my website, when I click on an event to this calendar I open a popup until the hopefully it works correctly, I would like to change the content of my popup by inserting values my event.
eventClick: function(calEvent, jsEvent, view) {
z=open('popup.html','','width=400,height=200,toolbar=no,scrollbars=no,resizable=yes,location=0,directories=no,menubar=no,status=no');
z.document.getElementById('test').append(toto);
},
Above me the code that opens my popup correctly I created a new file by "popup.html.
The last line does not work against ...
z.document.getElementById('test').append(toto);
I have an element with the id "test" in the HTML file of my popup. I also tried to generate the popum the fly from my script, I get this solution in a properly transmit information I want displayed in the popup io unfortunately I do not find a solution to the stylized popup window
w=open("",'popup','width=400,height=200,toolbar=no,scrollbars=no,resizable=yes');
w.document.write("<TITLE>"+document.forms[0].elements["titre"].value+"</TITLE>");
w.document.write("<BODY> Hello"+document.forms[0].elements["nom"].value+"<BR><BR>");
w.document.write("this popup work");
w.document.write("</BODY>");
w.document.close();
Do you have a solution to my / my problem?
Thank you in advance,
Good afternoon,
cordially

Do you really want a new window? Or do you only want a modal, like the jQuery.UI dialog?
In order to use the latter you usually prepare a <div>, e.g.
var myDialog = $("#toto");
myDialog.dialog({ autoOpen: false });
and use myDialog.dialog('open') to open it. Note that this will remove #toto from its parent. If you don't wish this behavior try var myDialog = $("#toto").clone().
You can then style the new dialog with the jQuery css methods.

Show Modal Dialog implementation using JQuery

I need to open a page as a Modal Dialog using Jquery .For Example: I have 2 pages say, Parent.aspx & Child.aspx, I need to open child.aspx in a modal dialog using JQuery when i click on a button/link in the parent.aspx. Also Postback can happen in the parent and child pages.

function test(){
openShadowBox("http://www.google.com", 400, 600, 'my google');
}
function openShadowBox(url, height, width, title){
width = parseInt(width)+60;
var horizontalPadding = 30;
var verticalPadding = 30;
$('<iframe id="cdt_shadowbox" src="' + url + '" frameBorder="0"/>').dialog({
title: (title) ? title : 'CDT Shadowbox',
autoOpen: true,
width: width,
height: height,
modal: true,
resizable: true,
autoResize: false,
closeOnEscape: true,
//position: 'top',
overlay: {
opacity: 0.5,
background: "black"
}
}).width(width - horizontalPadding).height(height - verticalPadding);
$('html, body').scrollTop(0);
}

I think the most easiest way is to use iframe in you dialog pointing to Child.aspx.

JQuery has a number of options for creating a Modal "popup" with a page, but as I read your question I think you want to open a page in a separate browser window with a modal relationship to the original page. Javascript (Jquery) allows for Window.Open. This opens your second page in a new window,however, it does not create a modal relationship, nor (I believe) can it.

There are a number of jquery plugins to work with modal dialogs, for instance:
http://plugins.jquery.com/project/modaldialog
Depending on the user experience you're looking for, you'll probably either want an iframe in the modal dialog or perhaps an ajax call to fetch the content and load it into the dialog.

You can either use an iFrame or an UpdatePanel.
A modal dialog is really no different than any other page element. What makes it appear to be "modal" is simply CSS and nothing more.
The one difficulty you make have with ASP.NET and jQuery, though, is that ASP.NET needs everything to be inside it's single form tag. Since jQuery isn't designed specifically for ASP.NET it (and its plugins) may or may not know (or care) about this.
For example if you use simplemodal it has an option to specify where on the form the dialog is appended, you can use this to ensure it's inside #aspnetform and everything it it should work just like any other page element.