在页面出口处添加bootstrap模式窗体

时间:2015-08-27 20:01:24

标签: jquery twitter-bootstrap joomla

当用户想要退出页面时,有没有办法在joomla 3.0中显示bootstrap表单? 我试图添加最接近页脚位置的自定义html页面。 当我尝试测试此功能时,我遇到1个错误: 1:`TypeError:无法读取属性'模态'为null;

在我的自定义html模块的代码下面。

     <div id="myModal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Contact Form</h4>
      </div>
      <div class="modal-body">
          <form role="form" action="" method="post" >
    <div class="col-lg-12">
      <div class="form-group">
        <label for="InputName">Name</label>
        <div class="input-group">
          <input type="text" class="form-control" name="InputName" id="InputName" placeholder="Enter Name" required>
          <span class="input-group-addon"><i class="glyphicon glyphicon-ok form-control-feedback"></i></span></div>
      </div>
      <div class="form-group">
        <label for="InputEmail"> e-mail</label>
        <div class="input-group">
          <input type="email" class="form-control" id="InputEmail" name="InputEmail" placeholder="Enter Email" required  >
          <span class="input-group-addon"><i class="glyphicon glyphicon-ok form-control-feedback"></i></span></div>
      </div>
      <div class="form-group">
        <label for="InputMessage">Message</label>
        <div class="input-group">
          <textarea name="InputMessage" id="InputMessage" class="form-control" rows="5" required></textarea>
          <span class="input-group-addon"><i class="glyphicon glyphicon-ok form-control-feedback"></i></span></div>
      </div>
      <input type="submit" name="submit" id="submit" value="Wyślij" class="btn btn-info pull-right">
    </div>
  </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Zamknij</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
    <script type='text/javascript'>

function goodbye(e) {
    if(!e) e = window.event;
    //e.cancelBubble is supported by IE - this will kill the bubbling process.
    $('#myModal').modal('show');    
    e.cancelBubble = true;
    e.returnValue = 'You sure you want to leave?'; //This is displayed on the dialog
   $('#test').show();

    //e.stopPropagation works in Firefox.
    if (e.stopPropagation) {
        e.stopPropagation();
        e.preventDefault();
    }
}
window.onbeforeunload=goodbye; 

</script>

有没有办法只显示没有浏览器提示信息的模式?

1 个答案:

答案 0 :(得分:0)

请确保包含引导程序框架(我确定您已经拥有)。

我相信你还需要在调用show方法之前将html元素初始化为modal。

$('#myModal').modal({'show':true}); 

请在此处查看示例:https://jsfiddle.net/y4zqd3b9/3/

另外,#test是什么?

更多信息:http://getbootstrap.com/javascript/#modals-methods