JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdn.foundation5.zurb.com/foundation.css">
<script src="http://cdn.foundation5.zurb.com/foundation.js"></script>
<script src="http://www.jsviews.com/download/jsviews.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.3.1/jquery.maskedinput.min.js"></script>
<div class="row switch small">
<input id="Opc1" name="Opc" value="1" type="radio"/>
<label for="Opc1"></label>
</div>
<div class="row switch small">
<input id="Opc2" name="Opc" value="2" type="radio"/>
<label for="Opc2"></label>
</div>
<div class="row switch small">
<input id="Opc3" name="Opc" value="3" type="radio"/>
<label for="Opc3"></label>
</div>
<div class="row switch small">
<input id="Opc4" name="Opc" value="4" type="radio"/>
<label for="Opc4"></label>
</div>
<div class="row switch small">
<input id="Opc5" name="Opc" value="5" type="radio"/>
<label for="Opc5"></label>
</div>
<div>
<input id="btGerar" class="button small" type="submit" value="GERAR" data-reveal-id="modal"/>
</div>
<div id="modal" class='reveal-modal' data-reveal=""></div>
<script id="tmplModal" type="text/x-jsrender">
<div class="row">
<div class="small-2 column">
<label for="txtRG" >RG</label>
</div>
<div class="small-10 column">
<input id="txtRG" type="text" />
</div>
</div>
<div class="row">
<div class="small-2 column">
<label for="txtCPF" >CPF</label>
</div>
<div class="small-10 column">
<input id="txtCPF" type="text" />
</div>
</div>
</script>
CSS
#modal label {
float: rigth;
}
#modal label:after {
content: ':'
}
JavaScript
$(document).foundation();
var btGerar = $("#btGerar");
var modal = $("#modal");
var tmplModal = $.templates("#tmplModal");
btGerar.click(function () {
var content = $(tmplModal.render({}));
var txtCPF = $("#txtCPF", content);
modal.empty();
modal.append(content);
console.log(txtCPF);
txtCPF.mask("999.999.999-99");
return;
});