What types of HTML are compatible with SweetAlert?

I am exploring the HTML elements that can be used with the SweetAlert alert function ().

It seems that headings like h1, h2, etc. and strong tags are allowed, but when I tried to add inline styles like style="color:blue;", the alert stopped working. The various heading styles didn't seem to have any impact either.

My current code looks like this:

<script>
swal({   
title: "text<br /><br />text",   
text: "<strong>text</strong>",   
timer: 4000, html: true,  
showConfirmButton: false });
</script>

If I want to customize the look of the alert to match my website's style, it looks like I'll have to modify the SweetAlert CSS.

I am seeking guidance on which HTML elements can safely be used within SweetAlert without interfering with its functionality.

javascriptjqueryhtmlcsssweetalert

Answer №1

If you want to include HTML elements in your SweetAlert without them being escaped, make sure to set the html option to true when you first initialize the plugin. This will give you the ability to use any kind of HTML tag within your alerts.

Just keep in mind that allowing HTML content can open up possibilities for XSS attacks, so be cautious if your alert content is coming from user input.

Here's an example from the documentation:

swal({
    title: "HTML <small>Title</small>!",
    text: "A custom <span style='color: #F8BB86'>html<span> message.",
    html: true
});

Answer №2

Update for 2017.

The feature html = true was originally present in SweetAlert version 1.x. However, this feature is no longer supported in the current version. Now, you should include the html content in the "html" option and exclude the "text" option.

It works perfectly in version '6.9.1':

swal({
        title: 'Title',
        html: 'A customized <span style="color: #F8BB86">html<span> message.'
});

Using HTML Links Inside Text with Javascript Sweet Alert

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

Explanation of JavaScript code snippet

fnTest = /abc/.test(function () { abc; }) ? /\bchild\b/ : /.*/; I am struggling to comprehend the functionality of this particular javascript snippet. Would someone be able to elaborate on the logic behind this code fragment? ...

javascript

Encountering issues with posting data on a straightforward Node.js form using routes

I'm having trouble getting a simple form to post within my NodeJS/ExpressJS app. The code in my app.js file (referred to as server.js) is as follows: var express = require('express'); var fs = require('fs'); var path = require(&a ...

javascriptnode.jsexpressroutesform-submit

Data is present in a JavaScript array, yet it is returning a value of

In my quest to create an array of User IDs for an AJAX Post Request, I encountered a strange issue. Despite successfully retrieving and displaying the User IDs individually in console.log, once I push them to the connectionData array, accessing specific in ...

javascriptarraysajax

Unspecified OrbitControls Compatibility Issue between Angular2 and Three.js

I'm running into issues trying to set up OrbitControls in my Angular2 project. I managed to display a scene with a box, but I'm struggling to move the camera. Upon investigation, I found that my OrbitComponent, responsible for defining orbit con ...

javascriptangularthree.js

Error 500 encountered during the AJAX request

Here is a snippet from my script: ......................... ......................... data = $(this).serialize() + "&" + $.param(data); $.ajax({ type: "POST", dataType: "json", url ...

phpjqueryajax

Issue: The type 'void' cannot be assigned to the type 'ReactNode' in the array.map() function

Having trouble with my function call error within the practice setup in App.tsx. My expectation of array.map() being compatible with TypeScript seems to be incorrect. The generated HTMLElement from this map is not displaying on screen. Any suggestions on ...

javascriptreactjstypescriptvisual-studio-codenext.js

Switching Angular fxLayout from row to column based on a conditional statementHere is an explanation of how to

Visit this link for more information Is there a way to set direction based on a specific value? <div if(value) fxLayout='row' else fxLayout='column'> ...

javascriptangularangular-flex-layout

Grid system that adapts without distortion

My goal is to create a grid that maximizes the number of elements in its width without stretching them to fit the entire window. That's why I'm utilizing CSS grid with the auto-fill property, which is almost achieving the desired outcome. I want ...

htmlcssgrid

Having difficulty sending a value with %45 to a REST API

Currently, I'm encountering an issue within my ASP.NET MVC 5 application. The problem arises when I send the following JSON data to a third-party API, which includes a password field: "{\"operation\":{\"Details\":{\"RESOURCE ...

c#htmlasp.netjsonjson.net

Click the button to add content to the top section of the div using jQuery

Looking for some assistance with a web development issue I'm facing. Here's the scenario: I have two sections on my webpage - TOP and BOTTOM. In the bottom section, there are 3 list records each with a checkbox and button. What I need help with ...

javascriptjqueryhtmlcss

Incorporate different courses tailored to the specific job role

https://i.stack.imgur.com/iGwxB.jpg I am interested in dynamically applying different classes to elements based on their position within a list. To elaborate: I have a list containing six elements, and the third element in this list is assigned the class ...

javascriptjqueryhtmlcss

What is the best way to format table values as currency?

Still getting the hang of Javascript, and I'm in the process of learning... Currently, my challenge involves calculating the total sum of values within a Bootstrap 4 table and formatting the result as currency (specifically in USD format). While I&ap ...

javascripthtml-tablebootstrap-4sum

Activate a function to focus on an input field once ngIf condition becomes true and the input is revealed

I am currently attempting to focus the cursor on a specific input field that is only displayed when the condition of the surrounding ngIf directive is true. Here is an example of the HTML code structure: <div> <button (click)="showFirst = ...

javascriptangular

retrieve object from s3 using angular and open it as a pdf

I'm attempting to access a file from an s3 bucket using Angular and display it as a PDF. I have a node service set up to retrieve the object, which I then call from Angular. However, when I try to open the PDF in Angular, it appears as a blank (white) ...

javascriptnode.jsangularaws-sdk-nodejsaws-s3-client

The body in Express is set to "Cannot GET [route]" during the execution of asynchronous code

I am currently working on an express application that includes some articles stored in a Mongo database. As I wait for the mongoose model Article to load, the body of the request gets changed to: <!DOCTYPE html> <html lang="en"> < ...

javascriptmongodbexpressmongoose

Retrieve the user_id without triggering any route

Is there a way to access the logged in user data without needing to make a request to any route or endpoint? //for example, how can I retrieve the id of the logged in user here? router.get('/',function(req,res,next){ //typically we would acce ...

javascriptnode.jsexpress

Is there a way for me to figure out if a Primefaces RadioCheckbox has been selected?

Despite the numerous examples available on how to count checked checkboxes, I am facing difficulties in getting it to work. My goal is to enable a button when at least one checkbox is checked on the page, and disable it when none are selected. However, n ...

javascriptjqueryprimefaces

What is the best way to search for items using only a portion of a phone number or typing a name in any case (uppercase, lowercase) and still get accurate results?

let contacts = [ { name: 'John', phone: 987654 }, { name: 'Sara', phone: 654321 } ] I am developing a contact manager app with various functions to manage contacts. Add new contac ...

javascriptnode.jsnpmweb-frontend

Learn how to create a visually stunning CSS menu by centering a background image from the website cssmenumaker

I found a ready-made dropdown menu on . The menu is working well, but I would like to center the buttons. Is there a way to do this? Here is the CSS code: @import url(http://fonts.googleapis.com/css?family=Open+Sans:600); /* Menu CSS */#cssmenu, #cssmenu ...

cssdrop-down-menucenteringready

Ways to modify the color of cells in a table generated from JSON

In developing an HTML table based on JSON data, I have created a university semester map that displays student information including their ID, year, term, and required courses for graduation. While the table is successfully created, I aim to customize the ...

javascriptphphtmlmysql