Modal - iOC

Blank Modal

Show example code

Show Modal

                                
                                    {{ \App\Helper::formatCode('
                                        
                                            Show Modal
                                        
                                        
                                            
                                                This is totally awesome blank modal!
                                            
                                        
                                    ') }}

Modal Size

Show example code

Show Small Modal Show Medium Modal Show Large Modal Show Superlarge Modal

                                
                                    {{ \App\Helper::formatCode('
                                        
                                            Show Small Modal
                                            Show Medium Modal
                                            Show Large Modal
                                            Show Superlarge Modal
                                        
                                        
                                            
                                                This is totally awesome small modal!
                                            
                                        
                                        
                                            
                                                This is totally awesome medium modal!
                                            
                                        
                                        
                                            
                                                This is totally awesome large modal!
                                            
                                        
                                        
                                            
                                                This is totally awesome superlarge modal!
                                            
                                        
                                    ') }}

Programmatically Show/Hide Modal

Show example code

                                
                                    {{ \App\Helper::formatCode('
                                        // Show modal
                                        cash(\'#programmatically-show-modal\').on(\'click\', function() {
                                            cash(\'#programmatically-modal\').modal(\'show\')
                                        })

                                        // Hide modal
                                        cash(\'#programmatically-hide-modal\').on(\'click\', function() {
                                            cash(\'#programmatically-modal\').modal(\'hide\')
                                        })

                                        // Toggle modal
                                        cash(\'#programmatically-toggle-modal\').on(\'click\', function() {
                                            cash(\'#programmatically-modal\').modal(\'toggle\')
                                        })
                                    ') }}

Warning Modal

Show example code

Show Modal

                                
                                    {{ \App\Helper::formatCode('
                                        
                                            Show Modal
                                        
                                        
                                            
                                                
                                                    
                                                    Oops...
                                                    Something went wrong!
                                                
                                                
                                                    
                                                
                                                
                                                    Why do I have this issue?
                                                
                                            
                                        
                                    ') }}

Modal With Close Button

Show example code

Show Modal

                                
                                    {{ \App\Helper::formatCode('
                                        
                                            Show Modal
                                        
                                        
                                            
                                                
                                                    
                                                
                                                
                                                    
                                                    Modal Example
                                                    Modal with close button
                                                
                                                
                                                    
                                                
                                            
                                        
                                    ') }}

Overlapping Modal

Show example code

Show Modal

                                
                                    {{ \App\Helper::formatCode('
                                        
                                            Show Modal
                                        
                                        
                                            
                                                
                                                    Click button bellow to show overlapping modal!
                                                    Show overlapping modal
                                                
                                                
                                                    
                                                        This is totally awesome overlapping modal!
                                                    
                                                
                                            
                                        
                                    ') }}

Header & Footer Modal

Show example code

Show Modal

                                
                                    {{ \App\Helper::formatCode('
                                        
                                            Show Modal
                                        
                                        
                                            
                                                
                                                    Broadcast Message
                                                    
                                                    
                                                        
                                                            
                                                        
                                                        
                                                            
                                                                
                                                                     Download Docs
                                                                
                                                            
                                                        
                                                    
                                                
                                                
                                                    
                                                        From
                                                        
                                                    
                                                    
                                                        To
                                                        
                                                    
                                                    
                                                        Subject
                                                        
                                                    
                                                    
                                                        Has the Words
                                                        
                                                    
                                                    
                                                        Doesn\'t Have
                                                        
                                                    
                                                    
                                                        Size
                                                        
                                                    
                                                
                                                
                                                    
                                                    
                                                
                                            
                                        
                                    ') }}

Delete Modal

Show example code

Show Modal

                                
                                    {{ \App\Helper::formatCode('
                                        
                                            Show Modal
                                        
                                        
                                            
                                                
                                                    
                                                    Are you sure?
                                                    Do you really want to delete these records? This process cannot be undone.
                                                
                                                
                                                    
                                                    
                                                
                                            
                                        
                                    ') }}

Success Modal

Show example code

Show Modal

                                
                                    {{ \App\Helper::formatCode('
                                        
                                            Show Modal
                                        
                                        
                                            
                                                
                                                    
                                                    Good job!
                                                    You clicked the button!
                                                
                                                
                                                    
                                                
                                            
                                        
                                    ') }}

Tiny Slider Modal

Show example code

Show Modal

                                
                                    {{ \App\Helper::formatCode('
                                        
                                            Show Modal
                                        
                                        
                                            
                                                
                                                    
                                                        
                                                            
                                                                
                                                                    
                                                                
                                                            
                                                            
                                                                
                                                                    
                                                                
                                                            
                                                            
                                                                
                                                                    
                                                                
                                                            
                                                            
                                                                
                                                                    
                                                                
                                                            
                                                        
                                                    
                                                
                                            
                                        
                                    ') }}