Create a div that pops up when clicked, just like the Fancybox jQuery feature

I'm looking to create a popup div with an elastic effect similar to jQuery's fancybox. I've tried using the following code, but it doesn't seem to work...

Here is the HTML:

<a href="#" id="LoginAnchorLink">ClickME</a>
<div id="dialog" class="Popup" style="display:none;">
    content of the div have to be popup
</div>

And the CSS:

.Popup {
    position: fixed;
    background-color: #ffffff;
    width: 100px; 
    height:100px;
}

Lastly, the jQuery:

jQuery(document).ready(function () {
    $("#LoginAnchorLink").click(function () {
        $("#dialog").fancybox();
    });
});

Could someone please point out if I am missing something or if there is an error in my code?

jqueryhtmlcssfancybox

Answer №1

Upon revisiting the content, I made the decision to make some edits to the post. I believe this will provide better clarity.

Remember to include the necessary css and javascript files for fancybox functionality.

Your login form

<div style="display: none;">
    <div id="logindiv" style="width:400px;height:100px;overflow: hidden;">
        Your div containing login information and input fields
    </div>
</div>

Login link

<a id="loginbutton" href="#logindiv" title="input your login details here">Click Here to Login</a>

jQuery

<script type="text/javascript">
    $(document).ready(function() {
        $("#loginbutton").fancybox({
            'titleShow'     : true,
            'transitionIn'  : 'elastic',
            'transitionOut' : 'elastic',
        });
    });
</script>

Answer №2

Your code needs to be updated as follows:

<a href="#" id="LoginAnchorLink">ClickME</a>
<div style="display:none;">
<div id="dialog" class="Popup">
    Content within this div should display as a popup.
</div>
</div>

Be sure to include the correct paths for the jQuery library and Fancybox JavaScript files.

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

Steps to deactivate two choices in a multi-select dropdown menu and visually dim those options

Hey there, I recently worked with Angular8 and Bootstrap 4. I utilized a Bootstrap multi-select dropdown, where I encountered an issue: specifically, I'm trying to disable and gray out the options for PL Marketing and CL Marketing but have been unsucc ...

javascriptjqueryangular

Is it possible to modify the font size of all text that shares a particular font size?

Lately, I've been pondering on a question. A few years ago, I created a website using regular CSS and now I want to make some changes to the font sizes. While I know that CSS variables are the recommended solution for this situation, I'm curious ...

javascripthtmljquerycsssass

How to implement variables within the .map() function in JavaScript?

I am working on a map function where I need to pass in a variable as a Key to change the object item key to be based on that variable instead. For example, I want the obj.Salary below to actually represent the salary value when day equals "Day" instead o ...

javascriptjquery

Exploring a personalized approach to searching in DataTables

I am facing a dilemma with implementing a custom search in a DataTables table due to my limited experience with JavaScript. The function I have only triggers on startup and not when typing in the search box. If you're interested, you can find my orig ...

javascriptjquerydatatables

I am encountering an issue with the functionality of my button display and hide feature in my code

I have a button that toggles between my favorite items and I want it to change its appearance when clicked. The button should be updated after a successful ajax call. However, the issue I am facing is that when I click on the hide button, the show button ...

jqueryajax

Guide on how to incorporate an external javascript file into an HTML button

I am currently working on an exercise through Udacity that involves creating an HTML form with JavaScript functions. The task is to input text into the form, submit it, and have it displayed on the webpage within a blue square. This exercise is designed to ...

javascriptjqueryhtml

Unable to delete the margin of Material-ui TextField

Having trouble removing the padding around material-ui's TextField component when using styled-components and inline styling. Any solutions to this issue? Interestingly, the inline width property is functioning correctly, unlike the styled-component w ...

cssreactjsinputmaterial-uistyled-components

Using jQuery to create a flawless animation

I am currently working on an animation project, and I have shared my progress on jsfiddle. Below is the code snippet I have utilized: /* JavaScript: */ var app = function () { var self = this; var allBoxes = $('.box&apos ...

javascriptjqueryhtmlcssanimation

Tips for incorporating Material.io outlined icons within css pseudoelements (::before) usage

I'm attempting to incorporate the Material.io icon into a button using ::before, but it is appearing filled rather than outlined. Unfortunately, there are no available instructions on how to display the icon in an outlined style. This is the code I ...

cssiconsmaterial-designmaterial-ui

Tips on how to break free from a chain or leap over it using jQuery

Is it possible to skip or break out of a chain in jQuery? For instance: $("h3").click(function(){ //doSomething if(~~) // in this case, break out of the chain (functions A and B will not work) else if(~~) // in this case, j ...

jquerychain

PHP response working inconsistently when called via ajax

My quest involves passing values to a PHP page that should respond with PHP code for loading. However, the issue arises when the returned PHP code only partially functions. AJAX: $.ajax({ type: 'post', url: 'bundles_drop.php', d ...

phpjqueryajax

Identifying with a jQuery IF statement all input fields that contain null values in order to eliminate the respective elements

My goal is to create a jQuery script that checks all input fields to see if they are empty. If an input field is empty, I want to remove the child image of the next occurring span element. Here is what I have attempted so far: if ($("input").val() == "") ...

javascriptjqueryif-statement

The icons in webviews on mobile apps (iOS and Android) fail to render correctly

My font icons are behaving inconsistently on webkit-based mobile browsers when used on mobile devices. When hovering over the span on a desktop browser, the icon properly fills its container: However, when hovering over the span on a mobile device, the i ...

htmlcsswebviewuiwebviewandroid-webview

HTML5 Dragend event failed to trigger in Firefox

While working on my project, I encountered an issue where the 'dragend' event is not fired in Firefox 22.0 on Ubuntu but works perfectly fine in Chrome. I have written a logic to make changes on drag start and revert them if drop fails, triggered ...

javascriptjqueryhtmldrag-and-drop

vaadin-grid selection issue not functioning

I'm encountering an issue with the row selection feature. The selectedItems array only updates when I select all items at once. I'm not sure if I'm missing something or if this is a bug. selectedItems: An array that contains the selected ...

javascripthtmlpolymerpolymer-2.xvaadin-grid

Submitting a form within AJAX-powered tabs (using the Twitter Bootstrap framework)

I have encountered an issue while trying to submit a form that is located within tabs. The content of these tabs is generated through AJAX. My problem arises when I submit the form - the page refreshes and loads the "default" tab, causing the PHP function ...

javascriptphpjqueryajaxtwitter-bootstrap

Sending a parameter from a click event to a function

Struggling with a jQuery and AJAX issue all night. I am new to both and trying to implement something similar to this example. I have an edit button with the ID stored in a data-ID attribute. Here's an example of what my button looks like: <butto ...

javascriptjqueryajax

Two tables are positioned using distinct alignments but share a common stylesheet

I have created two tables, one using HTML (with a touch of PHP) and the other with two PHP loops. Starting with the stylesheet: .statistics { font-family: Arial, monospace; font-size: 36px; margin-left: 5%; width: 90%; } .statistics tr { ...

phphtmlcssformshtml-table

Ways to prevent a div from loading an HTML page

When an external button is clicked, the remove() function on id main is triggered. The issue arises when a user quickly clicks on btn1 and then presses the external button, causing the removal to occur before the event handler for btn1. This results in the ...

javascriptjqueryhtmlajax

React.js - jQuery method fails to function

The application utilizes node.js and react.js, specifically the use of react-async. Within a react component, there is a click handler that needs to retrieve the class names - specifically minus_decrement and inline_block. To achieve this, jQuery was integ ...

jquerynode.jsreactjsreact-async