【问题标题】:Show different forms within a modal on click of different buttons单击不同按钮时在模态中显示不同的表单
【发布时间】:2016-12-06 20:04:01
【问题描述】:

我肯定做错了,但必须有一种方法来简化这个过程。我有一个包含 4 个表单的模式,除了一个具有“活动”类的表单外,所有表单都是隐藏的。我需要根据来自不同按钮的点击事件触发每个单独的表单,即。注册/忘记密码/登录等,所以当我单击注册按钮时,模式会出现并激活注册表单,单击忘记密码只是切换表单以显示忘记密码。等等。

我的想法是创造:

  function modalSwitch() {

  var btnModal   = [$('btn-one'),$('btn-two'),$('btn-three'), $('btn-four')];
  var formModal   = [$('form-one'),$('form-two'),$('form-three'), $('btn-four')];

  btnModal.click(function(){
    if ( btnModal[].attr('class') === formModal[].attr('data-id')) {
      formModal.addClass('active');
    }  
  });
}

modalSwitch();

而不是点击事件:

  function modalSwitch() {

  var btnOne   = $('.btn-one'); 
  var btnTwo   = $('.btn-two'); 
  var btnThree = $('.btn-three'); 
  var btnFour  = $('.btn-four'); 
  var btnFive  = $('.btn-five'); 
  var btnSix   = $('.btn-six'); 

  var modalOne   = $('.modal-one'); 
  var modalTwo   = $('.modal-two'); 
  var modalThree = $('.modal-three'); 
  var modalFour  = $('.modal-four'); 
  var modalFive  = $('.modal-five'); 
  var modalSix   = $('.modal-six');

  btnOne.click(function(){
    modalOne.addClass('show');
    modalTwo.removeClass('show');
    modalThree.removeClass('show');
    modalFour.removeClass('show');
    modalFive.removeClass('show');
    modalSix.removeClass('show');
    ....
  });

  }

  modalSwitch();

但我现在很迷茫,任何帮助将不胜感激

【问题讨论】:

  • btnModalformModal 应该是 jQuery 变量;它们目前是普通数组。例如,您可以使用$('.btn-one, .btn-two, .btn-three, .btn-four') 选择多个按钮。
  • 不知道你在这里想说什么,这不是解决方案......

标签: javascript bootstrap-modal


【解决方案1】:

可以使用 data-src 属性来实现,例如:

<a href="#" class="btn btn-normal open-logs" data-src="my_details" data-heading="My Heading">
                        Demo
                    </a>

<div id="my_details" class="hide">
your form here
</div>

创建一个css类,默认隐藏div。

像这样打开模态框:

$(document).ready(function() {     
    $(".open-logs").click(function(e){
        e.preventDefault();
       var logId = $(this).data('src');
       var html = $("#"+logId).html();
       $("#myModalLabel").html($(this).data('heading'));
       $("#modalBody").html(html);
       $("#logModal").modal('show');
    });    
});

【讨论】:

    【解决方案2】:

    下面的代码将解决您的所有查询。 sn-p 中的代码有一组额外的 css 和 js,它们将为您生成引导模型。您无需为所有模型编写常规且相同的代码块。

    function simpleSHow(title)
    			{
    				var msg=$('#simple-div');
    				
    				BootstrapDialog.show({
    					title : title,
    					message: $('#simple-div'),
    					onhide : function(){
    						$('#hidden-div').append(msg);
    					}
    				});
    			}
    			
    			function complexSHow(title)
    			{
    				var msg=$('#complex-div');
    				
    				BootstrapDialog.show({
    					title : title,
    					message: $('#complex-div'),
    					onhide : function(){
    						$('#hidden-div').append(msg);
    					}
    				});
    			}
    			
    			function showDiv1(div_id)
    			{
    				var msg=$('#lavel-2_div-1');
    				BootstrapDialog.show({
    					title : 'Level 2 Title',
    					message: $('#lavel-2_div-1'),
    					onhide : function(){
    						$('#hidden-div').append(msg);
    					}
    				});
    			}
    			
    			function showDiv2(div_id)
    			{
    				var msg=$('#lavel-2_div-2');
    				BootstrapDialog.show({
    					title : 'Level 2 Title',
    					message: $('#lavel-2_div-2'),
    					onhide : function(){
    						$('#hidden-div').append(msg);
    					}
    				});
    			}
    			
    			function showDiv3(div_id)
    			{
    				var msg=$('#lavel-2_div-3');
    				BootstrapDialog.show({
    					title : 'Level 2 Title',
    					message: $('#lavel-2_div-3'),
    					onhide : function(){
    						$('#hidden-div').append(msg);
    					}
    				});
    			}
    			
    			function showDiv4(div_id)
    			{
    				var msg=$('#lavel-2_div-4');
    				BootstrapDialog.show({
    					title : 'Level 2 Title',
    					message: $('#lavel-2_div-4'),
    					onhide : function(){
    						$('#hidden-div').append(msg);
    					}
    				});
    			}
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.3/css/bootstrap-dialog.min.css" rel="stylesheet">
    
    
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.3/js/bootstrap-dialog.min.js"></script>
    
    
    
    <!--  This is a container Div which contains all the div to show when bootstrap dialog opens -->
    <div style="display : none" id="hidden-div">
      <div id="simple-div">
        <h1>This is H1 Heading</h1>
        This is most simple coding
        <br>
        <button type="button" class="btn btn-primary" onclick="showDiv1()">Lavel-2 div-1</button>
        <button type="button" class="btn btn-primary" onclick="showDiv2()">Lavel-2 div-2</button>
      </div>
    
      <div id="lavel-2_div-1">
        <h3>This is Level 2 Header</h3>
        <span style="color : blue;">This is Level 2 Message 1</span>
      </div>
    
      <div id="lavel-2_div-2">
        <h3>This is Level 2 Header</h3>
        <span style="color : greenyellow;">This is Level 2 Message 2</span>
      </div>
    
      <div id="lavel-2_div-3">
        <h3>This is Level 2 Header</h3>
        <span style="color : pink;">This is Level 2 Message 3</span>
      </div>
      <div id="lavel-2_div-4">
        <h3>This is Level 2 Header</h3>
        <span style="color : green;">This is Level 2 Message 4</span>
      </div>
    
      <div class="container-fluid" id="complex-div">
    
        <button type="button" class="btn btn-primary" onclick="showDiv3()">Lavel-2 div-3</button>
        <button type="button" class="btn btn-primary" onclick="showDiv4()">Lavel-2 div-4</button>
        <h2>Panels with Contextual Classes</h2>
        <div class="panel-group">
          <div class="panel panel-default">
            <div class="panel-heading">Panel with panel-default class</div>
            <div class="panel-body">Panel Content</div>
          </div>
    
          <div class="panel panel-primary">
            <div class="panel-heading">Panel with panel-primary class</div>
            <div class="panel-body">Panel Content</div>
          </div>
    
          <div class="panel panel-success">
            <div class="panel-heading">Panel with panel-success class</div>
            <div class="panel-body">Panel Content</div>
          </div>
    
          <div class="panel panel-info">
            <div class="panel-heading">Panel with panel-info class</div>
            <div class="panel-body">Panel Content</div>
          </div>
    
          <div class="panel panel-warning">
            <div class="panel-heading">Panel with panel-warning class</div>
            <div class="panel-body">Panel Content</div>
          </div>
    
          <div class="panel panel-danger">
            <div class="panel-heading">Panel with panel-danger class</div>
            <div class="panel-body">Panel Content</div>
          </div>
        </div>
      </div>
    
    </div>
    
    &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
    <button type="button" class="btn btn-primary" onclick="simpleSHow('Hello 1234')">Simple Div Show</button>
    &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
    <button type="button" class="btn btn-primary" onclick="complexSHow('Complex 1234')">Complex Div Show</button>

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2022-11-10
      • 2020-06-14
      • 2022-01-05
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-09-19
      • 1970-01-01
      相关资源
      最近更新 更多