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

I am in need of a customized 'container' template that will display MyComponent based on a specific condition known as 'externalCondition'. MyComponent includes the usage of a Form and formValidation functionalities

container.html <div ngIf="externalCondition"> <!--Initially this is false. Later became true --!> <my-component #MyComponentElem > </my-component> <button [disabled]= "!myComponentElemRef.myDetailsF ...

htmlangulartypescriptdomangular-forms

Transmit JSON data from the client to the MarkLogic Server device

Hello everyone, hope you are all doing well. I am a beginner in Marklogic and recently managed to set up a rest api on my local machine. Following the given example, I used curl to send/create documents in the database. Now, my query is how can I access/ ...

javascriptjsoncurlnosqlmarklogic

The persistent issue of window.history.pushstate repeatedly pushing the identical value

I need some assistance with my Vue application. I am trying to update the URL when a user clicks on an element: const updateURL = (id: string) => { window.history.pushState({}, '', `email/${id}`); }; The issue I'm facing is th ...

javascriptvue.jsvuejs3vue-router

Verify if a certain value is present within a nested array

I need assistance with checking if a specific value is present within a nested array. Here is an example of the data I am dealing with: [ { name: 'alice', occupation: ['Artist', 'Musician'], }, { ...

javascriptarraysreactjsdata-structures

Transferring time between functions in Vue.js: A journey from one function to another

Struggling to pass the value from checkMp3SizeAndDuration method function to data() {return { time: '' } } Check out the code snippet below: data () { return { time: '' } }, methods: { checkMp3SizeAndDuration ...

javascriptfunctionvue.jsmethods

What is the best way to apply typography theme defaults to standard tags using Material-UI?

After reading the documentation on https://material-ui.com/style/typography/ and loading the Roboto font, I expected a simple component like this: const theme = createMuiTheme(); const App = () => { return ( <MuiThemeProvider theme={theme}> ...

javascripthtmlcssreactjsmaterial-ui

A step-by-step guide to displaying a label component upon clicking an AjaxLink

How can I display data from a JSON file when an AjaxLink is clicked? The code I have implemented is not working, so I would appreciate any corrections or suggestions. Additionally, I am wondering if it's possible to add a label inside AjaxLink. Thank ...

javahtmlwicketwicket-6

Concealing a block from top to bottom

I currently have a filter that is hidden when clicked, with a transition effect that moves it from the bottom to the top. I have recorded my screen to demonstrate this behavior: . However, I now need the filter to hide from top to bottom instead, essenti ...

javascriptcssreactjsanimation

When attempting to transfer data to a CSV file from my Firebase database, I encounter an issue where the

I am facing an issue with exporting data from my Firebase Firestore to a .csv file. I have followed all the necessary steps, but whenever I try to add the values for export, they show up as undefined. While I am not an expert in React and consider myself ...

javascriptreactjsfirebasecsvreact-hooks

Identifying and detecting Label IDs when clicked using the for tag

I am facing an issue with labels and input fields in my code. I have multiple labels that trigger the same input field, but I want to know which specific label triggered the input field. <label id="label1" for="input1">Document1</label> <la ...

javascriptjqueryhtml

Failure to trigger Summernote's OnImageUpload function

After transitioning to the latest version of Summernote, which is Version 7, I encountered a problem with the image upload functionality. Despite specifying the line onImageUpload: function(files) {sendFile(files[0]);}, it seems that this code is not being ...

javascriptphpjquerysummernote

Guide to filtering an array within ag-grid when defining a column

After switching from using DataTable to ag-grid, I encountered a challenge. In DataTable, I accessed the first element from the attributes array where typeName='ItemType'. Now, I am looking to achieve the same functionality in ag-grid. Any sugges ...

javascriptjqueryangularjsag-grid

Turn off automatic compilation for LESS styling

In my Eclipse environment, I am looking to have LESS compile only when explicitly triggered by mvn package. Currently, any changes made in my less file immediately update the CSS. How can I prevent this automatic behavior? <plugin> <groupId> ...

csseclipsemavenless

Error: Query has already been processed: Updating Todo with ID "612df063a8f"

After updating mongoose to the latest version (6.0.2), I encountered an error that crashes the application whenever .updateOne() is executed. However, the object is still updated inside the database. Below is my code snippet: async(req,res) => { a ...

javascriptnode.jsmongodbexpressmongoose

How to pass arguments to the `find` method in MongoDB collections

I've been attempting to pass arguments from a function to the MongoDB collection find method. Here's what I have so far: async find() { try { return await db.collection('users').find.apply(null, arguments); } catch(err) { c ...

javascriptnode.jsmongodbarguments

Manipulate images in real-time and insert custom text using JavaScript/jQuery

Within my possession is an image depicted above. My objective revolves around dynamically altering the values present at the occurrences of L, A, and B; to achieve this, I must eliminate or conceal L, A, and B while substituting them with numerical equiv ...

javascriptjqueryhtmldynamic-textdynamic-image-generation

What factors cause variations in script behavior related to the DOM across different browsers?

When looking at the code below, it's evident that its behavior can vary depending on the browser being used. It appears that there are instances where the DOM is not fully loaded despite using $(document).ready or similar checks. In Firefox, the "els ...

javascriptlaravelvue.jsdomcross-browser

Can you explain the significance of verbosity in a nodemon setup?

Can someone explain the verbose setting in my nodemon configuration and what impact it has on the project? { "verbose": true, "watch": "./server" } I have checked the readme file for nodemon, but it doesn't provide any information on this specif ...

javascriptnode.jsnpmnodemon

What could be causing my webpage to automatically refresh following a POST request in NodeJS?

Utilizing the express framework alongside NodeJS, I have encountered an issue where my client webpage refreshes after making a POST request that triggers a python script and returns a JSON object to the client. My dilemma lies in preventing this automatic ...

javascriptnode.jsexpressfetchaxios

The row in the table is not reaching its maximum height

Trying to design a layout with a topbar followed by a split layout has posed some challenges. The main issue I encountered was the need for the width and height to adjust automatically based on the browser size. To address this, I attempted to use a table ...

htmlcss