modal-dialog

How to check if bootstrap modal is open, so I can use jquery validate?

by

To avoid the race condition @GregPettit mentions, one can use: ($(“element”).data(‘bs.modal’) || {})._isShown // Bootstrap 4 ($(“element”).data(‘bs.modal’) || {}).isShown // Bootstrap <= 3 // or, with the optional chaining operator (?.) $(“element”).data(‘bs.modal’)?._isShown // Bootstrap 4 $(“element”).data(‘bs.modal’)?.isShown // Bootstrap <= 3 as discussed in Twitter Bootstrap Modal – IsShown. When the modal is not yet opened, … Read more

Using :before CSS pseudo element to add image to modal

by

http://caniuse.com/#search=::after ::after and ::before with content are better to use as they’re supported in every major browser other than Internet Explorer at least 5 versions back. Internet Explorer has complete support in version 9+ and partial support in version 8. Is this what you’re looking for? .Modal::after{ content:url(“https://stackoverflow.com/questions/6668577/blackCarrot.png”); /* with class ModalCarrot ??*/ position:relative; /*or … Read more

Good or bad practice for Dialogs in wpf with MVVM?

by

This is a good approach and I used similar ones in the past. Go for it! One minor thing I’d definitely do is make the event receive a boolean for when you need to set “false” in the DialogResult. event EventHandler<RequestCloseEventArgs> RequestCloseDialog; and the EventArgs class: public class RequestCloseEventArgs : EventArgs { public RequestCloseEventArgs(bool dialogResult) … Read more

How to set the focus for a particular field in a Bootstrap modal, once it appears

by

Try this Here is the old DEMO: EDIT: (Here is a working DEMO with Bootstrap 3 and jQuery 1.8.3) $(document).ready(function() { $(‘#modal-content’).modal(‘show’); $(‘#modal-content’).on(‘shown’, function() { $(“#txtname”).focus(); }) }); Starting bootstrap 3 need to use shown.bs.modal event: $(‘#modal-content’).on(‘shown.bs.modal’, function() { $(“#txtname”).focus(); })

Disable click outside of angular material dialog area to close the dialog (With Angular Version 4.0+)

by

There are two ways to do it. In the method that opens the dialog, pass in the following configuration option disableClose as the second parameter in MatDialog#open() and set it to true: export class AppComponent { constructor(private dialog: MatDialog){} openDialog() { this.dialog.open(DialogComponent, { disableClose: true }); } } Alternatively, do it in the dialog component … Read more