Show dialog on Mobile and Desktop
.. some code
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.all.css">
<button id="addwebcam">Add Webcam</button>
<div id="cameraformwebcam" title="Add a webcam">
<form id='AddCameraFormWebcam' action=''>
<p>
<label for="CameraName">Camera name: <span class="small">Enter label for camera</span>
</label>
<input type="text" id="CameraName" name="camera_name" size="24" maxlength="36" />
</p>
<p>
<label for='CameraQuality'>Camera quality: <span class="small">Select camera quality</span>
</label>
<select id='CameraQuality' name='camera_quality'>
<option value='HIGH' selected='selected'>High</option>
<option value='MEDIUM'>Medium</option>
<option value='MOBILE'>Mobile</option>
</select>
</p>
<p>
<label for='CameraStatus'>Motion detection: <span class="small">Turn motion detection on/off</span>
</label>
<select id='CameraStatus' name='camera_status'>
<option value='ENABLED' selected='selected'>On</option>
<option value='DISABLED'>Off</option>
</select>
</p>
<p>
<label for='EmailNotice'>Email notice: <span class="small">Turn email notices on/off</span>
</label>
<select id='EmailNotice' name='email_notice'>
<option value='ENABLED' selected='selected'>On</option>
<option value='DISABLED'>Off</option>
</select>
</p>
<p>
<label for='CameraSensitivity'>Camera sensitivity: <span class="small">Select camera sensitivity</span>
</label>
<select id='CameraSensitivity' name='camera_sensitivity'>
<option value='HIGH'>High</option>
<option value='AVERAGE' selected='selected'>Average</option>
...
JavaScript
$('#cameraformwebcam').hide();
$("#addwebcam").click(function(event){
event.stopPropagation();
touchStart(event);
if(event.handled !== true) {
$('#cameraformwebcam').show();
$('.addwebcam').hide();
event.handled = true;
} else {
return false;
}
});
function touchStart(event) {
if (event.target.tagName != 'SELECT') {
event.preventDefault();
alert(event);
}
}
$('.submit_camera').click(function(){
alert("Send data");
});