Languages

Menu
Sites
Language
problem with popup

Hi,

I want to open popup for camera and gallery.i want popup to be appear.

 

my code is

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="Tizen basic template generated by Tizen Web IDE"/>

    <title>Tizen Web IDE - Tizen - Tizen basic Application</title>
 
<link rel="stylesheet" href="./jquery.mobile-1.4.5.min.css"/>

<script src="js/jquery.min.js"></script>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script src="js/main.js"></script>
</head>

<body>
<a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">
  <img src="./icon.png" alt="Smiley face" height="100" width="100">
  </a>
  <div data-role="popup" id="myPopup" class="ui-content">
          <button id="im1" class="btn btn-primary" style="width:100%" onclick="gallery();">Gallery</button>
        <button class="btn btn-primary" style="width:100%" onclick="camera();">Camera</button>
          </div>
</body>
</html>

 

please help me

Thanks and regards

Mohit Kumar

 

 

 

 

 

List

Responses

13 Replies
colin Rao

hi,

<a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">

change the data-rel value to "myPopup", and try again.

colin Rao

sorry, please ignore previous comments.

f.y.i.

<a href="#popupBasic" data-rel="popup" data-role="button" data-inline="true" data-transition="pop">Basic Popup</a>
<div data-role="popup" id="popupBasic">
    <p>This is a completely basic popup, no options set.</p>
</div>
mohit kumar

Hi colin Rao,

I want popup will appear when click on the link.But here popup wappears when code is run.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="Tizen basic template generated by Tizen Web IDE" />

    <title>Tizen Web IDE - Tizen - Tizen basic Application</title>

    <script type="text/javascript" src="js/jquery.min.js"></script>
    
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    
    <script src="js/jquery.min.js"></script>

<script src="js/jquery.mobile-1.4.5.min.js"></script>
    <script src="js/main.js"></script>

</head>

<body>
    

<div class="maindiv" style="background-image:url('images/back.jpg');">

<a href="#popupBasic" data-rel="popup" data-role="button" data-inline="true" data-transition="pop">Basic Popup</a>
<div data-role="popup" id="popupBasic" style="background-color:yellow;position:absolute;top:40%;left:20%;">
    <p>This is a completely basic popup, no options set.</p>
</div>

<div id="img1">
<img src="css/images/heart1.png" class="img1hw" id="im1">
</div>

<div id="img2">
<img src="css/images/heart2.png" class="img2hw" id="im2">

</div>


<div id="img3">
<img src="css/images/heart3.png" class="img3hw" id="im3">

</div>


</div>
        
        
</body>

</html>

 

 

Thanks and regards

Mohit Kumar

colin Rao

also, seems you include the jquery lib twice.

<script src="js/jquery.min.js"></script>
<script src="js/jquery-1.9.1.js"></script>

Vikram

Hi,

I run this code in simulator and the icon is appear. And no code for gallery() and camera(). So what's the main problem.

mohit kumar

Hi vikram,

On the click of icon image i want popup should be appear with two button.

 

 

 

Thanks and regards

Mohit Kumar

Palitsyna

Hello,

I run your code. After clicking the icon popup with two buttons appears. As I understood it is the expected behaviour. What is your problem?

mohit kumar

Hi Palitsyna,

When i run my code popup appear without clicking on the image icon.I want popup should appear when i click on the image icon.I want poup appear in the center of screen.

 

 

Please help me

Thanks and regards

Mohit Kumar

 

 

mohit kumar

Hi Palitsyna,

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="Tizen basic template generated by Tizen Web IDE" />

    <title>Tizen Web IDE - Tizen - Tizen basic Application</title>

    <script type="text/javascript" src="js/jquery.min.js"></script>
    
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    
    <script src="js/jquery.min.js"></script>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
    <script src="js/main.js"></script>

</head>

<body>
    

  <a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">
  <img src="./icon.png" alt="Smiley face" height="100" width="100">
  </a>
  <div data-role="popup" id="myPopup" class="ui-content" style="height:40%;width:50%;position:absolute;top:30%;">
          <button id="im1" class="btn btn-primary" style="width:100%" onclick="gallery();">Gallery</button>
        <button class="btn btn-primary" style="width:100%" onclick="camera();">Camera</button>
          </div>    

 


<div class="maindiv" style="background-image:url('images/back.jpg');">

 

<a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">
  <img src="./icon.png" alt="Smiley face" height="100" width="100">
  </a>
  <div data-role="popup" id="myPopup" class="ui-content" style="height:40%;width:50%;position:absolute;top:30%;">
          <button id="im1" class="btn btn-primary" style="width:100%" onclick="gallery();">Gallery</button>
        <button class="btn btn-primary" style="width:100%" onclick="camera();">Camera</button>
          </div>    

 


<!-- <a href="#popupBasic" data-rel="popup" data-role="button" data-inline="true" data-transition="pop">Basic Popup</a>
<div data-role="popup" id="popupBasic" style="background-color:yellow;position:absolute;top:40%;left:20%;">
    <p>This is a completely basic popup, no options set.</p>
</div>
 -->
<div id="img1">
<img src="css/images/heart1.png" class="img1hw" id="im1">
</div>

<div id="img2">
<img src="css/images/heart2.png" class="img2hw" id="im2">

</div>


<div id="img3">
<img src="css/images/heart3.png" class="img3hw" id="im3">

</div>


</div>
        
        
</body>

</html>

 

Thanks and regards

Mohit KUmar

Palitsyna

Hello,

First of all, you have code duplication. This code is used before and after <div class="maindiv" style="background-image:url('images/back.jpg');"> line.

<a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">
	<img src="./icon.png" alt="Smiley face" height="100" width="100">
</a>
<div data-role="popup" id="myPopup" class="ui-content" style="height:40%;width:50%;position:absolute;top:30%;">
	<button id="im1" class="btn btn-primary" style="width:100%" onclick="gallery();">Gallery</button>
	<button class="btn btn-primary" style="width:100%" onclick="camera();">Camera</button>
</div

Delete unnecessary lines.

Then add TAU library to use popup.

Seoghyun Kang

When I watched your code, there was some strange codes.

<script src="js/jquery.min.js"></script>
<script src="js/jquery-1.9.1.js"></script>

 

It is the duplicated code. I recommend that you remove the second line.

That's becuase of the performance.

AVSukhov

Hello,

More info aobout popup you can find in documentation:

https://developer.tizen.org/dev-guide/2.3.0/org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Popup.htm

Vikram

Hi,

I write the whole code for this popup, you can refer. Pay special attention to add TAU library and tau.css. Run success both on simulator and real device

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width,user-scalable=no"/>
    <script src="./lib/jquery.js"></script>
    <script type="text/javascript" src="./lib/tau/mobile/js/tau.js" data-build-remove="false"></script>
    <link rel="stylesheet"  href="./lib/tau/mobile/theme/default/tau.css">	
</head>

<body>        
    <div data-role="page" id="main">
        <div data-role="content">         
            <a href="#myPopup"  data-rel="popup">
            	<img alt="smiley face" src="./icon.png" height="100" width="100">
            </a>		      		        		         		      	            	                    
        </div><!-- /content -->  
        <div id="myPopup" data-role="popup" class="mypopup" style="height:40%;width:50%;position:absolute;top:30%;">
	    <button id="im1" class="btn btn-primary" style="width:100%" onclick="gallery();">Gallery</button>
	    <button class="btn btn-primary" style="width:100%" onclick="camera();">Camera</button>
        </div>    
    </div>                 
</body>
</html>