单击不同按钮,在模态中显示不同的表单

时间:2016-12-06 20:04:01

标签: javascript bootstrap-modal

我肯定认为这一切都错了,但必须有办法简化这个过程。我有一个包含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();

但我现在迷失了,任何帮助都会受到赞赏

2 个答案:

答案 0 :(得分:0)

您可以使用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');
    });    
});

答案 1 :(得分:0)

以下代码将解决您的所有查询。代码片段中有一组额外的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>