Question

我在我的项目中使用Bootsrap Modal。我无法发布我的代码。

所以我用jsfiddle来解释我的情景。

我有两个模态FFTS fft = FFTS.real(FFTS.FORWARD, 8); fft.execute(x,output); 28.000000 + 0.000000i -4.000000 + 9.656855i -4.000000 + 4.000000i -4.000000 + 1.656854i 0.000000 + 0.000000i 0.000000 + 0.000000i 0.000000 + 0.000000i 0.000000 + 0.000000i，modal1并从modal2获取值并显示到modal1。

一旦我在代码下运行。我不是一个接一个地获得模态。

是否可以在modal2返回值之前停止执行。

modal1

完整代码Fiddle

Answer 1

单击第一个模态中的按钮

时调用第二个模态

<强> HTML

<div id="modal1" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Modal 1</h4>
      </div>
      <div class="modal-body">
        <p><input type="text" id="modalvalue"></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" id="btn1" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div id="modal2" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Modal 2</h4>
      </div>
      <div class="modal-body">
        <h3>
            Response from Modal1: <span id="Response"></span>
      </h3>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->




<a class='btn btn-primary btn' data-direction='top'>Modal</a>

JAVASCRIPT

$('.btn').click(function() {
    $('#modal1').modal();

});

$('#btn1').click(function() {
var returnedvalue = $('#modalvalue').val();
   $('#modal2').modal();
   $('#Response').html(returnedvalue);
});

Answer 2

为每个模态按钮创建一个不同的类，更改第二次单击事件中的文本（当您单击第一个模态的保存时）

  <button type="button" class="btn btn-primary save">Save changes</button>
<a class='btn btn-primary btn main' data-direction='top'>Modal</a>

JS：

$('.main').click(function() {
    $('#modal1').modal();


});
$('.save').click(function(){
  $('#modal1').modal('hide');//hide the first modal
  var returnedvalue = $('#modalvalue').val();
  $('#Response').text(returnedvalue);
  $('#modal2').modal();
});

http://jsfiddle.net/0zw7r1r5/

Answer 3

解决此问题的最简单方法是在第一个模态的事件侦听器中执行其余功能。修改你的功能，我提出了这个：

$('#opener').click(function() {
  $('#modal1').modal();
  $('#modal1').on('hidden.bs.modal', function (e) {
    var returnedvalue = $('#modalvalue').val();
    $('#Response').text(returnedvalue);
    $('#modal2').modal();
  });
});

我还将主按钮更改为具有ID，以便您的事件侦听器不会监听具有.btn类的元素的所有单击。

<a id="opener" class='btn btn-primary' data-direction='top'>Modal</a>

您可以在this jsfiddle

中看到这种情况

Answer 4

你必须先使用$（'＃modal1'）。modal（）;在屏幕上显示在modal1按钮单击后再显示modal2

grep

Answer 5

尝试将调用函数用于model.if回调函数，如果工作。然后使用下面的代码：

＆＃13;

 $('.btn').click(function () {
        $('#modal1').modal('show', function (data) {
            var returnedvalue = data;
            if (data == 'yourvalue')
            {
                $('#modal2').modal('show');
                $('#Response').text(returnedvalue);
            }
           
            
        });
        
    });

＆＃13;

Answer 6

您想要的代码。

＆＃13;

$('.btn').click(function() {
    $('#modal1').modal();
    
});


function showModel2(){
	var returnedvalue = $('#modalvalue').val();
    $('#Response').text(returnedvalue);
    $('#modal2').modal();
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="modal1" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Modal 1</h4>
      </div>
      <div class="modal-body">
        <input type="text" id="modalvalue">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" onclick="showModel2()">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div id="modal2" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Modal 2</h4>
      </div>
      <div class="modal-body">
        <h3>
            Response from Modal1: <span id="Response"></span>
      </h3>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->




<a class='btn btn-primary btn' data-direction='top'>Modal</a>

＆＃13;

直到bootstrap模态返回值才执行

6 个答案: