bootstrap消息提示框_bootstrap弹出框获取数据

解决方案

在Web开发中，Bootstrap提供的消息提示框和弹出框是非常实用的组件。要实现从弹出框获取数据的功能，通常可以使用Bootstrap Modal组件结合JavaScript或jQuery来完成。通过监听Modal关闭事件、表单提交事件等方式，我们可以轻松地将用户在弹出框内输入的数据传递给页面其他部分或者发送到服务器端。

思路一：直接使用原生JavaScript操作DOM元素

HTML结构

html
<!-- 按钮触发模态框 --></p>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  获取数据
</button>

<p><!-- 模态框 --></p>

<div class="modal fade" id="exampleModal" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">输入信息</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        
          <div class="form-group">
            <label for="exampleFormControlInput1">邮箱地址</label>
            
          </div>
          <div class="form-group">
            <label for="exampleFormControlTextarea1">描述</label>
            <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
          </div>
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary">确认</button>
      </div>
    </div>
  </div>
</div>


function getData() {
  var email = document.getElementById('exampleFormControlInput1').value;
  var description = document.getElementById('exampleFormControlTextarea1').value;

  console.log('邮箱:', email);
  console.log('描述:', description);

  // 可以在这里进行AJAX请求等操作，向服务器发送数据
}


<p>

这段代码展示了如何定义一个简单的模态框，并通过onclick事件调用getData()函数来获取用户输入的数据。

思路二：使用jQuery简化操作

如果你已经在项目中引入了jQuery库，那么可以更方便地处理这些逻辑：

html</p>




$(document).ready(function(){
  $('#exampleModal').on('hidden.bs.modal', function () {
    // 当模态框隐藏时触发此事件
    var email = $('#exampleFormControlInput1').val();
    var description = $('#exampleFormControlTextarea1').val();

    console.log('邮箱:', email);
    console.log('描述:', description);

    // 清空表单
    $('#dataForm')[0].reset();
  });

  $('.confirm-btn').click(function(e){
    e.preventDefault();
    $('#exampleModal').modal('hide');
  });
});


<p>

这里我们绑定了模态框隐藏事件hidden.bs.modal，当用户点击“取消”按钮关闭模态框时会自动执行相关逻辑。同时为“确认”按钮添加了一个点击事件处理器，在点击后先阻止默认行为再关闭模态框。

以上两种方法都可以很好地实现从Bootstrap弹出框获取数据的需求。种方法适合对原生JavaScript有一定了解的开发者；第二种方法则更适合已经熟悉jQuery语法并且项目中已经在使用jQuery的情况。根据实际应用场景和个人喜好选择合适的方式即可。

（本文来源：nzw6.com）