Display various formats in a pop-up window when different buttons are clicked

Question

Display various formats in a pop-up window when different buttons are clicked

There has to be a simpler way to handle this situation. Currently, I have a modal with 4 hidden forms, one of which is active based on the "active" class. I want to show each form when different buttons like sign-up, forgot password, or sign-in are clicked.

I thought about creating:

function modalSwitch() {

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

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

modalSwitch();

instead of using separate click events for each button and form:

function modalSwitch() {

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

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

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

}

modalSwitch();

I'm feeling a bit overwhelmed right now, any assistance would be greatly appreciated

javascript bootstrap-modal

Answer 1

Answer №1

To achieve this, you can utilize the data-src attribute in your HTML code. Here is an example:

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

Make sure to create a CSS class to hide the div by default.

You can use the following script to trigger a modal box:

$(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');
    });    
});

Answer 2

To achieve this, you can utilize the data-src attribute in your HTML code. Here is an example:

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

Make sure to create a CSS class to hide the div by default.

You can use the following script to trigger a modal box:

$(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');
    });    
});

Answer 3

Answer №2

If you're looking to streamline your code for creating bootstrap models, look no further than the snippet below. This code includes additional CSS and JS that will automatically generate a bootstrap model without the need for repetitive coding.

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 divs to show when the bootstrap dialog opens -->
<div style="display : none" id="hidden-div">
  <div id="simple-div">
    <h1>This is H1 Heading</h1>
    This is the most straightforward coding
    <br>
    <button type="button" class="btn btn-primary" onclick="showDiv1()">Level-2 div-1</button>
    <button type="button" class="btn btn-primary" onclick="showDiv2()">Level-2 div-2</button>
  </div>

  <div id="level-2_div-1">
    <h3>This is Level 2 Header</h3>
    <span style="color : blue;">This is Level 2 Message 1</span>
  </div>

  <div id="level-2_div-2">
    <h3>This is Level 2 Header</h3>
    <span style="color : greenyellow;">This is Level 2 Message 2</span>
  </div>

  <div id="level-2_div-3">
    <h3>This is Level 2 Header</h3>
    <span style="color : pink;">This is Level 2 Message 3</span>
  </div>
  <div id="level-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()">Level-2 div-3</button>
    <button type="button" class="btn btn-primary" onclick="showDiv4()">Level-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>

Answer 4

If you're looking to streamline your code for creating bootstrap models, look no further than the snippet below. This code includes additional CSS and JS that will automatically generate a bootstrap model without the need for repetitive coding.

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 divs to show when the bootstrap dialog opens -->
<div style="display : none" id="hidden-div">
  <div id="simple-div">
    <h1>This is H1 Heading</h1>
    This is the most straightforward coding
    <br>
    <button type="button" class="btn btn-primary" onclick="showDiv1()">Level-2 div-1</button>
    <button type="button" class="btn btn-primary" onclick="showDiv2()">Level-2 div-2</button>
  </div>

  <div id="level-2_div-1">
    <h3>This is Level 2 Header</h3>
    <span style="color : blue;">This is Level 2 Message 1</span>
  </div>

  <div id="level-2_div-2">
    <h3>This is Level 2 Header</h3>
    <span style="color : greenyellow;">This is Level 2 Message 2</span>
  </div>

  <div id="level-2_div-3">
    <h3>This is Level 2 Header</h3>
    <span style="color : pink;">This is Level 2 Message 3</span>
  </div>
  <div id="level-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()">Level-2 div-3</button>
    <button type="button" class="btn btn-primary" onclick="showDiv4()">Level-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>

Display various formats in a pop-up window when different buttons are clicked

Answer №1

Answer №2

Similar questions

Unable to figure out why information is not being transferred to an array through Mongoose

How to transform an image into a base64 string using Vue

javascript tabs not functioning as expected in HTML

Problem with translating a variable into a selector in JQuery

Sorting by price using the ng-repeat directive is not suitable for this

Implementing the 'keepAlive' feature in Axios with NodeJS

What methods with JavaScript, Ajax, or jQuery can I apply to populate the student details?

Vue component lifecycle hook to fetch data from Firebase

Angular findIndex troubleshooting: solutions and tips

Error: express is missing a closing parenthesis for the argument list

Having trouble with AngularJS UI Router failing to load template and controller?

What is the best approach to structure a React project in which a component's rendering changes with each instance?

What is the best way to bring an image into your nextjs project?

converting HTML values to TypeScript

What's the best way to incorporate necessary styles into text using particular fonts?

Searching Text Boxes with Javascript: A Better Way to Handle Arrays

Encountering Issues with Discord JS as Member Fetch Returns Undefined

Ways to position cursor at the end in the Froala Editor

Increasing the checkout date by one day: A step-by-step guide

Using JavaScript to issue a Windows authentication request for Kerberos