在引导模式返回值之前不执行

Question

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

所以我用这个jsfiddle 来解释我的场景。

我有两个模态 modal1,modal2 并从 modal1 获取价值并显示到 modal2。

一旦我运行下面的代码。我不是一个一个地得到两种模态。

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

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

完整代码Fiddle

Answer 1

你想要的代码。

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


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

<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>

Answer 2

尝试在模型中使用调用函数。如果工作正常，则调用回调函数。然后使用以下代码：

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

Answer 3

你必须首先使用 $('#modal1').modal();在屏幕上显示 modal1按钮点击后显示modal2

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

});

$('#modal1 .btn-primary').click(function(){

    $('#modal1').modal('hide');

   var returnedvalue = $('#modalvalue').val();
    $('#Response').text(returnedvalue);
    $('#modal2').modal();
})

Answer 4

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

$('#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 5

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

  <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 6

点击第一个模态框内的按钮时调用第二个模态框

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);
});