Home›Docs›Bubble›Notice Dialog

Notice Dialog

Last updated: 10 days ago

Category: Bubble

The notice utility function is implemented by the Dialog library, which can quickly open a text notification and customize the opening position.

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
label	string	''	Button text
yes	function	null	Callback function when "Confirm" is clicked (no parameters)
dialog	object	{}	Parameters of dialog library

Basic Usage

This utility function quickly creates a notification dialog that appears in the bottom-left corner by default.

Usage is similar to alert and confirm utility functions - just provide the content parameter.

Output
HTML
JS

```
                
                
            
```

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

Callback Function

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

Output
HTML
JS

```
                
                
            
```

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

Promise then()

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

Since notice only has a "Confirm" button, then() always receives true when clicked.

Output
HTML
JS

```
                
                
            
```

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

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

Multiple Content Formats

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

Button Text

To customize the button text, use the label parameter (supports HTML tags).

Output
HTML
JS

```
                
                
            
```

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

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

Alert Dialog

10 days ago

Confirm Dialog