asked on

How to size popup in jquery mobile

Hi Expert,

I'm new to jquery and javascript.

I've got this page with multiple popup functionality all having their own dynamically set ID's. Is there a simple way to limit the width of those popup's?

I've tried to limit them using a <div class="popupcontainer"> but that did not work.

<!--#INCLUDE FILE="config.asp"-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Cache-Control" content="no-store" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
	<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.4.5.min.css">
<!--	<link rel="stylesheet" href="_assets/css/jqm-demos.css">-->
	<script src="js/jquery/jquery.js"></script>
	<script src="_assets/js/index.js"></script>
	<script src="js/jquery/jquery.mobile-1.4.5.min.js"></script>

<style>
	.blok {
		margin-top: 0px;
		margin-bottom: 0px;
		margin-right: 150px;
		margin-left: 150px;
		
	}
	.popupcontainer {
    width: 60%;
    left: 20%;
    right: 20%
		
	}
	.ui-listview > li > p {
	border: 1px solid #ddd;
	border-top: none;
	margin: 0;
	background: #f6f6f6;
}
	
	#pageone .ui-header {
    background: #5069A0;
	.ui-footer {
    background: #5069A0;
}

</style>

<script type="text/javascript">
function popupCenter(url, title, w, h) {
    var left = (screen.width/2)-(w/2);
    var top = (screen.height/2)-(h/2);
  return window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);
} 
</script>
</head>
<body>
<div data-role="page" id="pageone">
  <div data-role="panel" id="myPanel" data-theme="b" data-swipe-close="false"> 
    <h2>Menu</h2>
   <ul data-role="listview">
            <li data-icon="delete"><a href="#" data-rel="close">Sluit menu</a></li>
			<li></li>
                <li><a href="index.html">Home (vodo)</a></li>
                <li><a href="vraag.asp">Vraag</a></li>
				<li><a href="#panel-responsive-page2">Aanbod</a></li>
				<li><a href="#panel-responsive-page2">De lift</a></li>
				<li><a href="#panel-responsive-page2">Ideeen bus</a></li>
				<li><a href="contact.asp">Contact</a></li>
        </ul>
  </div> 



  <div data-role="header" data-position="fixed">
  <a href="#myPanel" >&#9776; &nbsp; menu</a><br>
  <p class="blok"><img src="plaatjes/logo.png" width=100% alt="logo"  /></p>
</div>
<%
' Query
Set RS = Server.CreateObject("ADODB.Recordset")
SQL = "SELECT * FROM  VODO_OnderwijsBehoefte order by geplaatst desc"
RS.Open SQL, cs ,3,3

%>
  <div data-role="main" class="ui-content">
  <div  class="blok">  
	<h1><font color=rgb(41,90,95)>Binnengekomen onderwijs behoeftes</font></h1>
	<a onclick="popupCenter('OnderwijsBehoefteToevoegen.asp','Zelf een onderwijs behoefte toevoegen',800,800);" href="javascript:void(0);" class="ui-btn ui-btn-inline ui-icon-plus ui-btn-icon-left">Een onderwijs behoefte toevoegen</a>
				<ul data-role="listview" data-inset="true">
				<% 
				vorigedatum=""
				Do While Not RS.EOF %>
					<% if vorigedatum<>RS("geplaatst") then %>
					<li data-role="list-divider"><% response.write(FormatDateTime(RS("geplaatst"),1)) %></li>
					<% end if %>
					<% vorigedatum=RS("geplaatst") %>
					<li><!--<a onclick="popupCenter('detailvraag.asp?vraag=<% response.write(RS("OnderwijsBehoefteID"))%>','1234',800,800);" href="javascript:void(0);">-->
					<a href="#myPopup<% response.write(RS("OnderwijsBehoefteID"))%>" data-rel="popup">
						<h2><% response.write(RS("naam")) %></h2>
						<p><strong><% response.write(RS("titel")) %></strong></p>
						<% response.write(RS("bericht")) %>
						<p>
						<a href="progress.html" data-role="button" data-mini="true" data-inline="true" data-icon="check" data-theme="b" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" class="ui-btn ui-shadow ui-btn-corner-all ui-mini ui-btn-inline ui-btn-icon-left ui-btn-up-b"><span class="ui-btn-inner"><span class="ui-btn-text">Dat zou ik ook wel willen</span><span class="ui-icon ui-icon-check ui-icon-shadow">&nbsp;</span></span></a>
						<a href="progress.html" data-role="button" data-mini="true" data-inline="true" data-icon="check" data-theme="b" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" class="ui-btn ui-shadow ui-btn-corner-all ui-mini ui-btn-inline ui-btn-icon-left ui-btn-up-b"><span class="ui-btn-inner"><span class="ui-btn-text">Schrijf een reactie</span><span class="ui-icon ui-icon-check ui-icon-shadow">&nbsp;</span></span></a>
						<a href="progress.html" data-role="button" data-mini="true" data-inline="true" data-icon="check" data-theme="b" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" class="ui-btn ui-shadow ui-btn-corner-all ui-mini ui-btn-inline ui-btn-icon-left ui-btn-up-b"><span class="ui-btn-inner"><span class="ui-btn-text">Deel dit met een collega</span><span class="ui-icon ui-icon-check ui-icon-shadow">&nbsp;</span></span></a>
						</p>
						</a>
						<p class="ui-li-aside"><strong><a href="progress.html">3 collega's willen dit ook!</a><br><a href="progress.html">1 Reactie op dit bericht</a></strong></p>
						</li>
						
					  <div data-role="popup" id="myPopup<% response.write(RS("OnderwijsBehoefteID"))%>" class="ui-content" data-overlay-theme="b">
					  <div class="popupcontainer">
					  <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
						<h2><% response.write(RS("naam")) %></h2>
						<p><strong><% response.write(RS("titel")) %></strong></p>
						<% response.write(RS("bericht")) %>
						<a href="progress.html" data-role="button" data-mini="true" data-inline="true" data-icon="check" data-theme="b" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" class="ui-btn ui-shadow ui-btn-corner-all ui-mini ui-btn-inline ui-btn-icon-left ui-btn-up-b"><span class="ui-btn-inner"><span class="ui-btn-text">Dat zou ik ook wel willen</span><span class="ui-icon ui-icon-check ui-icon-shadow">&nbsp;</span></span></a>
						<a href="progress.html" data-role="button" data-mini="true" data-inline="true" data-icon="check" data-theme="b" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" class="ui-btn ui-shadow ui-btn-corner-all ui-mini ui-btn-inline ui-btn-icon-left ui-btn-up-b"><span class="ui-btn-inner"><span class="ui-btn-text">Schrijf een reactie</span><span class="ui-icon ui-icon-check ui-icon-shadow">&nbsp;</span></span></a>
						<a href="progress.html" data-role="button" data-mini="true" data-inline="true" data-icon="check" data-theme="b" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" class="ui-btn ui-shadow ui-btn-corner-all ui-mini ui-btn-inline ui-btn-icon-left ui-btn-up-b"><span class="ui-btn-inner"><span class="ui-btn-text">Deel dit met een collega</span><span class="ui-icon ui-icon-check ui-icon-shadow">&nbsp;</span></span></a>
						</div>
						</div>
					<% RS.MoveNext 
					Loop 
					RS.close
					%>
				</ul>
  </div>

</div>
  <div data-role="footer" data-position="fixed">
    
  </div> 
</div>
</body>
</html>

Open in new window

Nicholas

At a cursory glance your popup div's are constrained by other container's css - the simple solution maybe a position:absolute to take it out of those constraints
But you haven't really said what is not happening as opposed to what should be happening

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Steynsk

ASKER

Thank you again Julian also for the excellent explaination.

Julian Hansen

You are welcome.