Tips for loading JavaScript and CSS files in a custom popup loader

Question

Tips for loading JavaScript and CSS files in a custom popup loader

Within the scope of my project, I have implemented a custom pop up page using JavaScript. This pop up includes a form for users to fill out. At the same time, I also need to load certain JavaScript files when the pop up is initialized. Can you please advise on how to achieve this?

<html>
     <head>
           <script type='text/javascript' src='files/jsfiles/core.js'></script>
     </head>
     <body>
           <!- To initiate javascript function showUsers() from here ->
          <input type='button' onclick='showUsers();' value='listUsers'>
     </body>
</html>

javascript jquery html css ajax

Answer 1

Answer №1

function createScriptElement(url) {
    var script = document.createElement("script");
    script.async = false;
    script.src = url;
    document.head.appendChild(script);
};

function createStyleElement(url) {
    var style = document.createElement("link");
    style.rel = "stylesheet";
    style.href = url;
    document.head.appendChild(style);
};

function loadExternalFiles() {
    var scriptsArray = ['src1url', 'src2url'.., 'scrnurl'];
    var csssArray = ['src1url', 'src2url'.., 'scrnurl'];
    for (var i = 0; i < scriptsArray.length; i++) {
        createScriptElement(scriptsArray[i]);
    }
    for (var i = 0; i < csssArray.length; i++) {
        createStyleElement(csssArray[i]);
    }
};

function submitFunction(callback) {
    // your functionality here;
    callback();
}
$(document).ready(function () {
    // do your stuff
    submitFunction(loadExternalFiles);
});

Also check: Another short form

Answer 2

function createScriptElement(url) {
    var script = document.createElement("script");
    script.async = false;
    script.src = url;
    document.head.appendChild(script);
};

function createStyleElement(url) {
    var style = document.createElement("link");
    style.rel = "stylesheet";
    style.href = url;
    document.head.appendChild(style);
};

function loadExternalFiles() {
    var scriptsArray = ['src1url', 'src2url'.., 'scrnurl'];
    var csssArray = ['src1url', 'src2url'.., 'scrnurl'];
    for (var i = 0; i < scriptsArray.length; i++) {
        createScriptElement(scriptsArray[i]);
    }
    for (var i = 0; i < csssArray.length; i++) {
        createStyleElement(csssArray[i]);
    }
};

function submitFunction(callback) {
    // your functionality here;
    callback();
}
$(document).ready(function () {
    // do your stuff
    submitFunction(loadExternalFiles);
});

Also check: Another short form

Answer 3

Answer №2

If you're looking for a sleek and easy-to-use library, check out fancybox.

One way to load jQuery is from a CDN:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />

Add this HTML code to create a pop-up page:

<a href="pop up page" onclick='openmsg_sent();' class="iframe open_pop">Sign in</a>

Use the following JavaScript code to activate fancybox functionality:


$('.open_pop').fancybox({
});

function openmsg_sent() {
    jQuery(".open_pop").trigger("click");
}

Answer 4

If you're looking for a sleek and easy-to-use library, check out fancybox.

One way to load jQuery is from a CDN:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />

Add this HTML code to create a pop-up page:

<a href="pop up page" onclick='openmsg_sent();' class="iframe open_pop">Sign in</a>

Use the following JavaScript code to activate fancybox functionality:


$('.open_pop').fancybox({
});

function openmsg_sent() {
    jQuery(".open_pop").trigger("click");
}

Answer 5

Answer №3

To ensure a more cohesive UI experience, consider using a div element that can be displayed with fixed positioning when the button is clicked.
I suspect that an Alert might not have the capability to display CSS properties if I am correct.

One approach you can take is to place your popup content inside a hidden div in the JS code and then reveal it upon clicking the button.

I hope this suggestion proves helpful.

Answer 6

To ensure a more cohesive UI experience, consider using a div element that can be displayed with fixed positioning when the button is clicked.
I suspect that an Alert might not have the capability to display CSS properties if I am correct.

One approach you can take is to place your popup content inside a hidden div in the JS code and then reveal it upon clicking the button.

I hope this suggestion proves helpful.

Tips for loading JavaScript and CSS files in a custom popup loader

Answer №1

Answer №2

Answer №3

Similar questions

Changing the text color using jQuery is proving to be difficult for me

Defeat a JavaScript function or turn it into a Singleton Function

Is it possible to translate the IIFE functions of threejs into ES6 format?

completing data tables and presenting them to clients

Tips for creating an endless loop within a nested v-for in Vue?

Using expect() within the .then() function when writing Jasmine unit tests for AngularJS

Can the font family of <body> be customized in Bootstrap 5?

Why is the $match function in Mongoose not functioning properly with an array of ObjectIds in Node.js

Removing the gridlines in a Linechart using Apexcharts

What is the method of generating an HTML tag solely using CSS?

Hover effect not displaying upon mouse exit

Tips for achieving a design aesthetic similar to that of the JQuery UI website

Avoiding the need to wait for completion of the jQuery $.get function

Guide to developing and showcasing a proof of concept (PoC) for a Google Chrome vulnerability using Out of Bounds (oob) method

Exploring ways to utilize fetch results within a return statement in React

How to position div elements side by side using CSS and center them, even on IE8

Creating dynamic HTML elements using ngFor within AngularJS allows for increased flexibility and customization on the

SSL causing Wordpress AJAX call to redirect from HTTPS to HTTP

Leveraging EJS for embedding Google Maps API on a website

Getting to grips with accessing HTML elements within a form