Home›Docs›Bubble›Alert Dialog

Alert Dialog

Last updated: 10 days ago

Category: Bubble

The alert utility function can quickly open a warning dialog that requires clicking 'confirm' to close, serving as a replacement for the native alert method.

Confirm Dialog10 days agoNotice Dialog10 days agoAlert Dialog10 days ago

Parameters

Parameter	Type	Default	Description
content	string	''	Main content of the dialog, usually plain text but supports other formats (same as getContent function's content parameter)
contType	string	''	Content type (same as getContent function's contType parameter)
contData	object	{}	Data for content retrieval (same as getContent function's contData parameter)
tplStr	string	''	Template string used when data is object/array
tplEng	function	null	Template engine (can use third-party engines)
heading	string	''	Dialog title if needed
yes	function	null	Callback function when "Confirm" is clicked (no parameters)
dialog	object	{}	Parameters of dialog library

Basic Usage

Similar to native alert, just provide the content parameter.

Output
HTML
JS

```
                
                
            
```

                
                demo0001.onclick = ()=>{
                    orca.alert({
                        content:'U.S. Inflation Falls For 2nd Straight Month On Lower Gas Costs',
                    });
                }

Custom Buttons

Default only has "Confirm" button. To customize buttons, use dialog.footer.children parameter.

Refer to Dialog module's footer setting methods. You can also customize the entire dialog via dialog.* parameters.

Output
HTML
JS

```
                
                
            
```

                
                demo2102.onclick = ()=>{
                    orca.alert({
                        content:'U.S. Inflation Falls For 2nd Straight Month On Lower Gas Costs',
                        dialog:{
                            footer:{
                                children:[{
                                    name:'mybtn',
                                    label:'Test',
                                    action:(data)=>{
                                        data.el.onclick=()=>{
                                            console.log(data);
                                        }
                                    }
                                },'confirm']
                            }
                        }
                    })
                }

Callback Function

The yes parameter is a callback function (no parameters) that executes when "Confirm" is clicked.

Output
HTML
JS

```
                
                
            
```

                
                demo0101.onclick = ()=>{
                    orca.alert({
                        content:'U.S. Inflation Falls For 2nd Straight Month On Lower Gas Costs',
                        yes:()=>{console.log('Confirmed')},
                    });
                }

Promise then()

The alert utility returns a Promise allowing operations in then().

Since alert requires mandatory confirmation, then() always receives true.

Output
HTML
JS

```
                
                
            
```

                
                demo0002.onclick = ()=>{
                    orca.alert({
                        content:'U.S. Inflation Falls For 2nd Straight Month On Lower Gas Costs',
                    }).then((val)=>{
                         console.log('Confirmed,value is: '+val)
                    });
                }

async/await

Using async/await instead of then() chains can make the flow more intuitive.

Output
HTML
JS

```
                
                
            
```

                
                demo0003.onclick = async ()=>{
                   let val = await orca.alert({
                        content:'U.S. Inflation Falls For 2nd Straight Month On Lower Gas Costs',
                    });
                     console.log('Confirmed')
                }

Movable Dialog

Without heading parameter, dialog is fixed at top. Setting any heading allows dragging the dialog by its title bar.

Output
HTML
JS

```
                
                
            
```

                
                demo0004.onclick =  ()=>{
                   orca.alert({
                        content:'U.S. Inflation Falls For 2nd Straight Month On Lower Gas Costs',
                        heading:'Emergency Notice'
                    });
                }

Multiple Content Formats

While alert typically shows plain text, it supports various formats via:

contType and contData parameters
tplStr and tplEng for object/array data (default uses built-in renderTpl, but supports third-party template engines)

Output
HTML
JS

U.S. Inflation Falls For 2nd Straight Month On Lower Gas Costs

Boston Marathon To Make Race More Inclusive For Nonbinary Runners
```
                
                
            
```

                
                demo0301.onclick =  ()=>{
                   orca.alert({
                        content:document.querySelector('#cont01').cloneNode(true),
                    });
                }
                demo0302.onclick =  ()=>{
                   orca.alert({
                        content:'https://req.orcaui.com/v1/html/v1_en_world.html#China',
                        contType:'async'
                        // contData: {}, 
                        // This parameter is used to send data when requesting content from dynamic pages. 
                        // The dynamic page returns corresponding content to the frontend based on this data.
                    });
                }
                demo0303.onclick =  ()=>{
                   orca.alert({
                        content:'#cont02',
                        contType:'html'
                    });
                }
                demo0304.onclick =  ()=>{
                   orca.alert({
                        content:'https://req.orcaui.com/v1/json/orca.json',
                        contType:'async',
                        tplStr:`<ul><li>Name:{{this.name}}</li><li>Brief:{{this.brief}}</li><li>Site:{{this.site}}</li></ul>`,
                    });
                }

CSS Pagination

10 days ago

Notice Dialog