jquery模态:关闭模态,然后将其作为可单击选项提供

时间:2014-03-10 23:21:01

标签: javascript jquery twitter-bootstrap grails

我一直在这个问题上摸不着头脑。

在grails中编写一个调用bootstrap-mini.js及其大部分css的插件。一切正常。我遇到的问题是我有一个远程表单,onComplete运行java脚本:

https://github.com/vahidhedayati/ml-test/blob/master/grails-app/views/mailingListModal/_modalcreate.gsp

<g:javascript>

function ${controller}CloseModal() {
  var myClone=$('#BuildModal${id}').clone();
    $('#BuildModal${id}').dialog().dialog('close');
   $(".modal-backdrop").hide();
   $('body').removeClass('modal-open');
//var myCloner = myClone.clone();
   $('#${divId}1').hide().append(myClone);
     //$('body').append(myClone);

<g:if test="${!disablecheck.equals('true') }">
var controller="${controller }";
var divId="${divId }";
$.get('${createLink(controller:"MailingListEmail", action: "getAjaxCall")}?ccontroller='+controller+'&divId='+divId,function(data){
$('#${divId}').hide().html(data).fadeIn('slow');
});
</g:if> 
}
</g:javascript>

函数顶部的位是我到目前为止所尝试的所有内容。 https://github.com/vahidhedayati/ml-test/blob/master/grails-app/views/mailingListEmail/contactclients.gsp

<div class="tbutton">
  <button href="#BuildModalSENDERS" class="btn btn-block btn-success" role="button" data-toggle="modal" title="Configure New Sender">
  New Sender?</button>
<div id="mailerSenders1">
  <g:render template="/mailingListModal/modalcreate" model="[title:'Add Senders Email', controller: 'mailingListSenders', callPage: 'form' , divId: 'mailerSenders', id: 'SENDERS' ]" />
  </div>

最后是modelForm,它包含在modalcreate.gsp的顶部(现在显示)

<div class="modal fade" id="BuildModal${id}" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<g:if test="${flash.message}">
<div class="message" role="status">${flash.message}</div>
</g:if>

     <g:formRemote id="${controller}" name="urlParams" class="form-horizontal" url="[controller:controller, action:'save']"
              update="BuildModal${id}" onComplete="${controller}CloseModal()"
              >
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>${title }</h3>
</div>
<div class="modal-body">
<div class="form-group">
<g:render template="/${controller }/${callPage }"/>
<g:submitToRemote class="myformsubmit" url="[controller:controller, action:'save']" update="BuildModal${id}" onComplete="${controller}CloseModal()" value="Create" />
</div>
</div>
</g:formRemote>

</div>
</div>
</div>


  </div>

因此提交的远程表单可以调用上面的CloseModal

问题是当我关闭此功能时,当用户点击按钮创建新电子邮件时如何使其再次可用?

在java脚本的顶部添加了所有克隆后,我唯一的区别就是让它在第二次点击时显示背景,因此在第二次点击时变黑,但没有显示模态内容。

1 个答案:

答案 0 :(得分:0)

确定这样做:

 <button href="#BuildModalSENDERS" class="btn btn-block btn-success" role="button" data-toggle="modal" title="Configure New Sender"

现在添加

onClick="runCheck()"> .....

        <g:javascript>
        function runCheck() {
            $('#mailerSenders1').show();
        }
        </g:javascript>

这似乎工作正常,它现在加载页面,只是添加当我做了身体它只是从注释的尝试再次加载它,modal.hide等没有工作,隐藏尝试只是显示它在同一页面的某些其他层下..无论如何这现在工作正常。抱歉