Languages

Menu
Sites
Language
How to add popup feature?

I want to add popup feature in my app.

Something like this: http://www.tizenexperts.com/2013/06/overview-application-multi-window-feature-tizen-ux/

How can I achieve that?

Or it isn't supported anymore?

Preloaded video player have this feature. But, I couldn't find documentation on how to use this.

List

Responses

6 Replies
Iqbal Hossain

hi, 

Try this

<div id="popupPage" class="ui-page">
    <header class="ui-header">
    	<h2 class="ui-title">Popup</h2>
	</header>
	<div class="ui-content">
		<ul class="ui-listview">
			<li><a href="#2btnPopup" data-rel="popup">General</a></li>
		</ul>
	</div>

	<div id="2btnPopup" class="ui-popup">
		<div class="ui-popup-content">
			Enable flight
			mode?<br>
			Flight mode
			disables Wi-Fi.<br>
			<label class="label-popup-check"><input type="checkbox"/>Don't repeat</label>
		</div>
		<div class="ui-popup-footer ui-side-button ui-grid-col-2">
			<a id="2btnPopup-cancel" href="#" class="ui-btn btn-icon-cancel" data-rel="back">Cancel</a>
			<a id="2btnPopup-ok" href="#" class="ui-btn btn-icon-check" data-rel="back">OK</a>
		</div>
	</div>
</div>

 

Vikram Dattu

Will you please explain, how this will be a popup window which could float around?

It would be better if if you include complete working example.

Thanks.

Iqbal Hossain

This is Popup definition with unique id 2btnPopup.

// Popup 
    <div id="2btnPopup" class="ui-popup">
		// Popup Content		
		<div class="ui-popup-content">
			
		</div>
		// Popup Footer
		<div class="ui-popup-footer">
			<a id="2btnPopup-cancel" href="#" class="ui-btn btn-icon-cancel" data-rel="back">Cancel</a>
			<a id="2btnPopup-ok" href="#" class="ui-btn btn-icon-check" data-rel="back">OK</a>
		</div>
   </div>

Just call this Popup from your desired action. 

<li><a href="#2btnPopup" data-rel="popup">Open Popup</a></li>

You have to use #2btnPopup as a value of href and give data-rel="popup".. 
Its simple. 

Vikram Dattu

Thanks for the reply.

But, this will be in app popup.

I want a window floating around on top. Something like Inbuilt video app offers. It pops up a video in small window which floats around on top. And I can then multitask.

Is this possible with web app?

Vikram Dattu

Please have a look at this UX guide page: https://developer.tizen.org/development/ux-guide/basic-interaction/multi-window

How to achieve this? Is this native feature? Where can I find the api documentation for this?

Iqbal Hossain

That is not a popup !! That is Multi Window feature. 
I am not sure about that api. I did't find anything for that API. But you can use Floating feature.

follow this https://developer.tizen.org/design/mobile/ui-components/assist-views#floating_