Beautiful prompt interface for HTML

I'm attempting to create a sweet alert using the HTML option:

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

Instead of just text, I want to include a button. I've tried the following:

var boton = "button";
swal({   
    title: "HTML <small>Title</small>!",  
    text: "<input type=" + boton + ">",  
    html: true 
});

Unfortunately, this doesn't seem to work as expected! I'm looking to create a menu with options in the form of buttons. Does anyone have any suggestions on how to achieve this? Thank you!

javascripthtmlcsssweetalert

Answer №1

If you prefer, you have the option to utilize the button element instead of the input element.

Here is an example:

var boton = "button";
swal({
    title: "HTML <small>Title</small>!",
    text: '<button type="' + boton + '">Button</button>',
    html: true
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>

Answer №2

The alert button is not showing because the default css rules for inputs hide them.

To display the button in sweetalets, you can customize the css by adding:

.sweet-alert input {
  display: initial !important;
}

I recommend giving your input a specific class and writing explicit CSS rules to prevent interference with other input elements used by the plugin.

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 update the bootstrap version in an existing project

My current project was built using Bootstrap 3.3.6 classes, but now I want to take advantage of the features offered by Bootstrap 5.2. However, simply changing the version of Bootstrap isn't as easy as it sounds. What is the most effective way to upgr ...

csstwitter-bootstraptwitter-bootstrap-3bootstrap-5upgrade

Generating a PDF from a CSS3 multi-column layout with the help of snappy (a wrapper for wkhtmltopdf)

I am attempting to create a PDF with three columns using barryvdh/laravel-snappy and wkhtmltopdf. Since the text that will populate these columns varies in length, I need a method that allows the text to flow freely within the columns. I have attempted to ...

phpcsswkhtmltopdf

The placeholder string is being accepted as the input value for the number

My issue is with a form input of type number. When the form is submitted without entering any number, it treats the placeholder text "rating" as the value. How can I stop this from happening? I need to make sure that the input number field is marked as in ...

htmlformsangularangular-forms

The issue I am facing is that when I click on a checkbox, only one of them seems to respond

When I click the button, only the first checkbox event is being checked while the rest of them are not. Can someone please provide some guidance on how to fix this issue? $("#cascadeChange").click(function() { //alert("Clicked"); ...

javascripthtmljquerycss

In Chrome, a horizontally floating item is pushed down, whereas in Firefox it remains in place

What is causing the last item in the submenu to be lower than the rest in Chrome, but aligned in Firefox? Check out this JSFIDDLE with font turned red for visibility View the ACTUAL SITE here I've experimented with padding, margin, vertical align, ...

htmlcssgoogle-chromefirefox

Measure with an "em" unit indicated by a dot

Could you clarify if there is a distinction between writing padding:.6em and padding:0.6em; and if they have the same value, why not just use padding:0.6em; ? Thank you ...

css

Is there a way to calculate the mean of radio buttons that each have their own distinct values?

My HTML page features a unique rating system created with radio buttons that resemble stars when filled in. The CSS styling gives them an appealing design. Additionally, I have included a submit button to display the selected star count when clicked. Here ...

javascript

Exploring a JavaScript function that triggers another function to create a new object - Utilizing Sinon and Mocha for testing purposes

I am currently working on a nodejs application where I need to write a test for a function that invokes another function to create a new object, and then calls a method of that object. Below is the code in service.js that I am trying to test; // servic ...

javascriptnode.jsunit-testingchaisinon

A step-by-step guide to showcasing dates in HTML with Angular

I have set up two datepickers in my HTML file using bootstrap and I am attempting to display a message that shows the period between the first selected date and the second selected date. The typescript class is as follows: export class Datepicker { ...

htmlangulartypescript

Node.js: The object in req is not functioning as expected

// Function to merge objects with unsent columns kept from old objects. function merge_options(obj1, obj2) { const obj3 = {}; for (var attrname in obj1) { obj3[attrname] = obj1[attrname]; } for (var attrname in obj2) { obj3[attrname] = obj2[attrname] ...

javascriptnode.js

Is there a method to individually collapse each div?

Each question in the database has a corresponding button. When one of these buttons is clicked, only the answer to that specific question should be displayed. However, the issue currently is that clicking on any button reveals all the answers simultaneousl ...

htmlspringbootstrap-4freemarker

Converting array elements to strings when extracting in JSON with JavaScript

I am working with a Json document that looks like this: { "_id": "13fee4aad95c7f822c0b559bd8d09fb0", "_rev": "5-336dea3680af3e7ec0de29369be90b09", "attributeCollection": { "attributeArray": [ { "name": "Web Issue", "val ...

javascriptarraysjsonstring

ReferenceError: _jquery2.default.ajax is not a function" encountered in a React Native application

I have been attempting to use jQuery to retrieve xml data from an internal website. My expo project setup is quite basic and resembles the following: import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; imp ...

javascriptreactjsreact-native

Retrieve the decimal separator and other locale details from the $locale service

After reviewing the angular $locale documentation, I noticed that it only provides an id (in the form of languageId-countryId). It would be helpful to have access to more specific information such as the decimal separator character. Is there a way to retri ...

javascriptangularjslocalizationlocale

Maintaining aspect ratio while resizing images: A foolproof guide

I've been working on image editing and encountered a bit of trouble with aspect ratios. <img src="big_image.jpg" width="900" height="600" alt="" /> As you can see, the height and width are already specifi ...

cssimageaspect-ratio

How can I efficiently include all css from node_modules in vuejs?

For my Vue.js app built with the webpack template and vuetify, I am starting by importing the vuetify css in my App.vue. <style> @import '../node_modules/vuetify/dist/vuetify.min.css' </style> I'm wondering if this is the c ...

javascriptnpmvue.jsnode-modulesvue-cli

Angular: Transforming input types

When the div is pressed, it triggers a function that changes the type of input. There are two password inputs that are changed to text when the function is triggered. Issue Error 1: 'password' may be null. If I enter '' in the password ...

htmlangular

"Optimizing XSL stylesheets by implementing conditional row styles to prevent redundant

Is there a way to display rows that are older than 2 years from today in bold without repeating the code? I know the condition I need, but I'm struggling with avoiding duplicating all the code just for a different style. This is the code I have: & ...

cssxslthtml-tablexslt-1.0

Transfer the data stored in the ts variable to a JavaScript file

Is it possible to utilize the content of a ts variable in a js file? I find myself at a loss realizing I am unsure of how to achieve this. Please provide any simple implementation suggestions if available. In my ts file, there is a printedOption that I w ...

javascriptangulartypescript

methods for extracting json data from the dom with the help of vue js

Can anyone help me with accessing JSON data in the DOM using Vue.js? Here is my script tag: <script> import axios from "axios"; export default { components: {}, data() { return { responseObject: "" }; }, asy ...

javascriptvue.jsvuejs2