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

What is the best way to structure my POST data when conducting tests on an express API endpoint?

AngularJS select box setting selected valueIt can be accomplished by manipulating the

Callback function triggered upon the creation of a DOM node

Converting hexadecimal to binary using Javascript or Typescript before writing a file on an Android or iOS device

Guide to automating the versioning of static assets (css, js, images) in a Java-based web application

Error encountered while scrolling with a fixed position

What is the process for fetching the chosen outcome from a subsequent webpage using HTML?

Is it possible to remotely adjust JavaScript configurations on the client's side using JSON?

Ways to fetch a JSON object using JavaScript

Ways to deselect checkboxes and eliminate validation requirements

Conceal/Inactivate element when scrolling, and once scrolling comes to a halt, reveal it once more

Unexpected behavior from Internet Explorer - Span contents remain unchanged despite valid input

Utilizing async await allows for the sequential processing of one item at a time within a For loop

Having trouble getting web components registered when testing Lit Element (lit-element) with @web/test-runner and @open-wc/testing-helpers?

I need help converting the "this week" button to a dropdown menu. Can someone assist me in troubleshooting what I am missing?

I have a desire to use Javascript to control CSS styles

Leveraging Javascript/jquery to retrieve image data for a specific frame within a video

Tips for sending multiple values to a jquery dialog box

Creating a customizable range input for pixel values: a step-by-step guide

"Learn the steps to access a JSON file directly from a URL within a Next.js