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

CSS selector that targets elements within a specified parent element

Imagine a scenario where there are numerous divs in an HTML document, like the three examples provided below: <div id="1"> <p>hi</p><p>Peter</p> </div> <div id="2"> <p> hola</p><p>Peter&l ...

csscss-selectors

JQuery - Triggering mouseenter/hover event only on top-level menu items, excluding the nested submenu items (list items that are not within nested lists)

I have a complex navigation menu structure with nested lists, and I'm struggling to trigger an event only on the top-level items when hovered. Despite trying different jQuery selectors and methods, such as using the NOT selector or targeting direct ch ...

javascripthtmljquerycss

Transforming hexadecimal color codes into spans

I've been experimenting with regex patterns to transform hexadecimal colors into spans. Take this example: #FF0000Hello#00FF00There <span style="color: #FF0000">Hello</span><span style="color: #00FF00">There</span> ...

phphtml

Guide on implementing jQuery Validation plugin with server-side validation at the form level

Does anyone have a suggestion for how to handle server-side validation errors that occur after passing the initial client-side validation on a form? $("#contact_form").validate({ submitHandler: function(form) { $.ajax({ type: 'POST', ...

javascriptjqueryvalidationjquery-validate

Certain HTML elements on the webpage are not functioning properly when attempting to incorporate a div tag

One of the challenges I'm currently facing is that the links for HOME and ABOUT ME in the header section are not accessible when the 'data' div is added. Strangely, the DOWNLOAD and CONTACT ME links still work fine. This issue seems to be oc ...

cssgoogle-chromehtmlhyperlink

Experiencing an issue with Handsontable: Every time I try to run the countRows method, all I get is "undefined."

Greetings everyone! I appreciate you taking the time to read about my issue. I've been using the handsontable library for a week now and have encountered some difficulties with certain methods. Within a function, I have the following code: count = $ ...

javascriptjqueryhandsontable

Unlocking the Power of Global Variables in HTML Pages with JTemplate and jQuery

Currently, I am utilizing jtemplate (jquery) and have an htm file structured as follows: <table width="100%" border="0" cellpadding="0" cellspacing="2"> <tr class="dark_color"> <th> Offer </th> & ...

c#jqueryasp.net

Using Angular 4 Component to Invoke JavaScript/jQuery Code From an External File

I have written a jQuery code that is executed at ngAfterViewInit(). //myComponent.ts ngAfterViewInit() { $(function () { $('#myElement').click(function (e) { //the code works fine here }); } However, I want t ...

javascriptjqueryangulartypescript

Retrieve information from the database upon clicking the submit button

My table is not getting data from the database when I click a button. I tried using this code but it returned an error. <div class="wrapper wrapper-content animated fadeInRight"> <div class="row"> <div class="col ...

phphtmlmysql

Why won't the items budge from the expandable box?

I am facing an issue with dragging and dropping elements between two divs, where one is resizable. My goal is to be able to drag items back and forth between the two divs seamlessly. $(".item").draggable({ helper: 'clone' }); $( ".container" ). ...

jquerydrag-and-dropresizable

Ways to implement JavaScript code in Angular 7 application

I am attempting to create a collapsible navigation bar using MaterializeCSS for mobile screens and I plan to incorporate JavaScript code into it. Can you advise where I should place this JavaScript code? Below is the snippet of code that I intend to inclu ...

javascriptjqueryangularmaterializeangular7

What is the best way to convert JavaScript to JSON in Python programming?

I encountered a situation where I have an HTML page that contains a lengthy product list, making it too large for me to upload. The products are stored within the script section of the page, specifically in one variable. Initially, I mistook this data for ...

javascriptpythonhtmljson

Display the hidden div element when clicked

In my code, I have two div elements as follows: <div class='staticMap'></div> <div class='geolocation-common-map'></div> Initially, the 'geolocation-common-map' div is removed using jQuery when the pa ...

javascriptjqueryhtml

Is there a way to reference a background-image using "<img src>" syntax?

Why won't the background image display? It only displays as an img src. How can I call the background-image correctly? <body> <div id="page" style="background- image:url(https://storage.blob.core.windows.net/name/image.png)"> ...

html

Guide for utilizing the Primary Key in a Django context view to display data in an HTML template through a Python for loop

Within my views, I have the following method along with my HTML structure: def index(request): context = { "user": User.objects.get(id = request.session['user_id']), "book": Book.objects.all(), &qu ...

pythonhtmldjangorenderprimary-key

ngAnimate - Animation not activating on recurring custom directive

I am trying to implement ngAnimate on a custom directive that is repeated using ng-repeat in my AngularJS application. The animations function correctly when I use ng-repeat on a simple HTML list-item. However, when I replace the list-item with a custom di ...

cssangularjsanimationangularjs-directiveng-animate

Troubleshooting issues with jQuery plugin functionality post-upgrade

My previous jQuery version was 1.4 or 1.8, but I upgraded to version 1.10.2 to access newer plugins. However, I encountered a problem - my jQuery code for editing attributes stopped working after the upgrade. Below is the code snippet: <script type="te ...

jquery

How to rename a class of an image tag using jQuery

I need to update the class name in my image tag <img src="img/nex2.jpeg" class="name"> When hovering over with jquery, I want to add a new class to it. After hovering, the tag should appear as follows: <img src="img/nex2.jpeg" class="name seco ...

javascriptjqueryhtmlcss

Top solution for preventing text selection and image downloading exclusively on mobile devices

My plan is to use the following code to accomplish a specific goal: -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; -webkit-tap-highlight-color:rgba(0,0,0,0); I& ...

javascriptjquerycss

When attempting to transmit data to the server, an error message pops up in the DevTools console of the browser. The error is displayed as "Network Error at create

I am currently utilizing React JS for the front end of my web application and PHP for the back end. When I try to send data to the server upon clicking a button on the webpage, I encounter the following error: Network Error at createError (createError.js:1 ...

phphtmlreactjsaxios