`Looking for help with transitioning CSS to JavaScript`

I'm facing an issue that needs to be resolved.

Please check out the link provided below.

pop up modal

This is the HTML code snippet....

<div class="wrap">

<a href="#modal-one" class="btn btn-big">Modal!</a>

</div>

<!-- Modal -->
<div class="modal" id="modal-one" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-header">
  <h2>Modal in CSS?</h2>
  <a href="#" class="btn-close" aria-hidden="true">×</a>
</div>
<div class="modal-body">
  <p>One modal example here! :D</p>
</div>
<div class="modal-footer">
  <a href="#" class="btn">Nice!</a>
  </div>
 </div>
</div>
<!-- /Modal -->

Currently, upon clicking the Modal button, a pop-up dialog appears with animation. However, I am looking to achieve this using jQuery as I have limited knowledge of CSS. Would appreciate any help on this!

The CSS can be found in the provided link

jquerycsscss-selectorsimplementation

Answer №1

Steps to convert this CSS to JS click event code:

1. Remove or comment out the :target CSS from the SCSS file.

// &:target {
//   // Active animate in modal
//   &:before {
//     display: block;
//   }
//   .modal-dialog {
//     .translate(0, 0);
//     top: 20%;
//   }
// }
  1. Write the JavaScript Code
// Using JavaScript =D
$('a[href="#modal-one"]').click(function(){
  $('.modal').addClass('open');
});
$('.close').click(function(){
  $('.modal').removeClass('open');
});
  1. Add some additional CSS for opening popup logic on click.
/* Additional CSS Added */
.modal.open .modal-dialog {
  transform: translate(0, 0);
  top: 20%;
}
.modal.open::before {
  content: "";
  display: block;
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}

Check out the updated CODEPEN link for reference.

Answer №2

Take a look at this bootstrap modal to see if it fits your requirements

JS:

jQuery(document).ready(function(e) {
    jQuery('#mymodal').trigger('click');
});

Answer №3

Utilize this jQuery sample code to handle your modal: it will either open the modal if it's closed, or close it if already open.

 
$("#kullaniciModal").modal("toggle");

<div class="modal fade" id="kullaniciModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Users</h4>
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Instead of loading the HTML into the div, Ajax is now sending me the link instead

I have just begun working on a new laravel project and am currently working on the user profile page, which will include a sidebar with links like Portfolio, Account Settings, etc. My goal is to dynamically load each page into a div when a link in the side ...

javascripthtmljqueryajaxlaravel

What is the process for reducing the value displayed on the label?

I have three labels and I would like to subtract the value of two labels and place the result in the third label. $(document).ready(function() { //Retrieve the values from both labels var value1 = document.getElementById("addition").innerText; ...

javascripthtmljquerysubtraction

Implementing a Bootstrap bottom popover when an image is clicked using JavaScript

Does anyone know how to display a Bootstrap bottom pophover when an image button is clicked using JavaScript? Appreciate any help! ...

javascriptcssangularjstwitter-bootstrap

Discover the method for selecting an element within a table that includes a style attribute with padding using Jquery

Looking for a way to identify a td element with the padding style in a table I've attempted to locate a td element with the padding style attribute in a table $(Table).find('td[style="padding:"]') or $(Table).find('td[style] ...

javascripthtmljquerycss

Error message stating that there is an issue with the `this.extButton` variable being null when attempting to manually adjust the toolbar settings for

When using aloha in a web application, I have found it to be very effective and capable of performing all necessary tasks. However, I have run into an issue when attempting to customize the toolbar with the following settings: Aloha.settings = { ... ...

javascriptjqueryextjsaloha-editor

Include a floating element within a modal box

I am trying to display some cards within a Bootstrap modal form. Inside the modal, I want the cards to appear in two columns by using the "col-md-5" class. .mycard.col-md-5 card contents However, when I use the "col-md-5" class, it adds a property o ...

htmlcsstwitter-bootstrap-3frontend

Utilize Javascript/Jquery to categorize JSON data based on the days of the week (Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday)

A function is provided below that retrieves data for a chart. The output produced by this function is structured as follows: [Object { date=Date, value=112, volume=1469}, Object { date=Date, value=124, volume=539}, Object { date=Date, value=114, vo ...

javascriptjqueryjson

What is the best way to create a close button using JavaScript?

I just started learning JavaScript and I want to figure out how to make the close button close the div .popup1 in the following code: https://jsfiddle.net/74hmx0vb/1 <div class='popup1' id="popup1"> <div class="containe ...

javascriptjqueryhtmlcss

Materialize CSS is throwing an error: 'velocity is not a function'

Encountering an issue with Materialize CSS. A JavaScript error appears 'I('.velocity is not a function', for certain actions. For instance, clicking the collapse icon on the sidenav results in e.velocity is not a function error. Similarly, u ...

javascripthtmlcssmaterialize

The close button for Fancybox gets cropped out when Foundation 3 and CSS border-box are used together

When the box-sizing is set to border-box, it can sometimes cut off the "close" button. This issue seems to be more prevalent when using Foundation 3 by Zurb. The snippet of code that may be causing conflicts with fancybox is as follows: * { box-sizin ...

cssfancyboxfancybox-2border-box

Customize the color of Bootstrap active tabs to have a unique and distinct hue for each tab

I have successfully managed to change the color of both active and non-active tabs as a group, but I am wondering if it is possible for the color to remain the same when moving to the next tab. Here is what I've tried: http://jsfiddle.net/pThn6/2031/ ...

jqueryhtmlcsstwitter-bootstraptabs

Misunderstandings between HTML and CSS

Can someone please clarify how the functionality of the active-slide class? Code: <div class="slider"> <div class="slide active-slide">..</div> <div class = "slide slide-feature">..</div> <div class = "slide">..</di ...

javascriptjqueryhtmlcss

jQuery show/hide functionality allows you to toggle the visibility of elements

I am looking to create a toggle button that expands the menu-wrapper width and hides the sidebar when clicked. Here is the initial CSS styling: #my-wrapper { Width:500px; } #sidebar-wrapper { width:200px; } Upon clicking the button, the CSS will update ...

javascriptjqueryhtmlcss

Changing form position dynamically based on selection can be achieved by following these steps

I am creating a website that functions as a compact Content Management System, enabling users to effortlessly modify most of the site's content. Within my rails application, I have established two models: Category and Subcategory. A Category has mult ...

jqueryruby-on-railsajaxformsrailscasts

The datepicker function is malfunctioning in a div that has been dynamically loaded through

I am experiencing an issue with loading a div populated by ajax. The datepicker does not seem to be called when the content is loaded this way. Initially, I had the datepicker loaded in the header of the main page, but even after trying to load it within ...

javascriptjqueryajaxdatepicker

Trouble with comparing two datetime values in JavaScript

I have a dilemma with two different appointments: appointment1 = "2013-07-08 12:30:00" appointment2 = "2013-07-08 13:30:00" My goal in JavaScript is to compare these two appointment dates. If they don't match, I want to remove the appointment; if t ...

javascriptjquerydatetime

Setting a JavaScript value for a property in an MVC model

I am currently working on an asp.net mvc application and I am in the process of implementing image uploading functionality. Below is the code for the image upload function: $(document).ready(function () { TableDatatablesEditable.init(); ...

javascriptc#jqueryasp.net-mvcasp.net-mvc-4

jQuery cannot interpret JSON response when using the $.post method

Essentially, I have a form that, when submitted, sends data to a server-side script to execute a function and returns data in JSON format for me to display on the page. Using jQuery, the data is sent to "createUser.php" using the $.post method $("#cre ...

jqueryajaxjsonformssubmit

Has the querystring hack become outdated?

For a long time, I have been adding a query string to my CSS link whenever I made changes that needed to be reflected on client machines: <link href="/Resources/styles/styles.css?v=1" rel="stylesheet" /> Lately, I've noticed that Chrome seems ...

htmlcssgoogle-chromebrowser

Font animation experiencing limited functionality

As a beginner in the world of programming, I am facing some challenges with my animation. The struggle lies in the fact that only my "Treats" are moving and not the "Tricks". Any guidance or suggestions would be greatly welcomed as I might have jumped into ...

htmlcsscss-animations