Home›Docs›Bubble›Confirm Dialog

Confirm Dialog

Last updated: 10 days ago

Category: Bubble

The confirm utility function simulates the native confirm method, allowing quick opening of a dialog box with confirm and cancel options.

Confirm Dialog10 days agoNotice Dialog10 days agoAlert Dialog10 days ago

Parameters

Parameter	Type	Default	Description
content	string	''	Main dialog content, 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)
no	function	null	Callback function when "Cancel" is clicked (no parameters)
dialog	object	{}	Parameters of dialog library

Basic Usage

Similar to native confirm, just provide the content parameter.

Output
HTML
JS

```
                
                
            
```

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

Callback Functions

The yes and no parameters represent callback functions for "Confirm" and "Cancel" respectively (both take no parameters).

Output
HTML
JS

```
                
                
            
```

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

Promise then()

The confirm utility returns a Promise allowing operations in then() to handle confirm/cancel actions.

Output
HTML
JS

```
                
                
            
```

                
                demo0002.onclick = ()=>{
                    orca.confirm({
                        content:'U.S. Inflation Falls For 2nd Straight Month On Lower Gas Costs',
                    }).then((val)=>{
                        //val=true/false,true means confirm，false means cancel
                        if(val){
                            console.log('Confirmed')
                        }else{
                            console.log('Canceled')
                        }
                    });
                }

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.confirm({
                        content:'U.S. Inflation Falls For 2nd Straight Month On Lower Gas Costs',
                    });
                        //val=true/false,true means confirm，false means cancel
                        if(val){
                            console.log('Confirmed')
                        }else{
                            console.log('Canceled')
                        }
                }

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.confirm({
                        content:'U.S. Inflation Falls For 2nd Straight Month On Lower Gas Costs',
                        heading:'Emergency Notice'
                    });
                }

Multiple Content Formats

While confirm 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.confirm({
                        content:document.querySelector('#cont01').cloneNode(true),
                    });
                }
                demo0302.onclick =  ()=>{
                   orca.confirm({
                        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.confirm({
                        content:'#cont02',
                        contType:'html'
                    });
                }
                demo0304.onclick =  ()=>{
                   orca.confirm({
                        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>`,
                    });
                }

Custom Buttons

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.confirm({
                         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']
                            }
                        }
                    })
                }

Notice Dialog

10 days ago

Button