Making confirm dialog look appealing

HTML & CSS
1

I am using confirmPopModal just like this , source code on github is here.

My piece of code:

Javascript :

$('#content').confirmModal({
           topOffset: 0,
           onOkBut: function() {},
           onCancelBut: function() {},
           onLoad: function() {},
           onClose: function() {}
 });

HTML:

 <!-- START for confirmmodal -->
            <div style="display:none">
                <div id="content">
                        <div>
                           <p class = "inset padding">Are you sure, you want to Reject this criteria?</p>
                        </div>
                        <div class="popModal_footer">
                            <button type="button" class="btn btn-success" data-confirmmodal-but="ok">Ok</button>
                            <button type="button" class="btn btn-success" data-confirmmodal-but="cancel">Cancel</button>
                       </div>
                </div>
            </div>
            <!-- END for confirmmodal -->

CSS Defined :


p.inset {border-style: inset;}

p.padding {

    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;
}

And the way it is getting displayed is as follows:

The above image doesn’t looks good for a confirm dialog. Is there a way, using confirmPopModal, I can make it look appealing?

Thanks

2

Do you have a picture in your mind of what you want it to look like?

3

Yeah, something like this modal confirmation dialog as mentioned here:

4

That doesn’t look like any of the demos from the page you linked to? have you removed the popModal css altogether?

5

Hi @PaulOB ,

Thanks for your reply. It’s not exactly same as it looks like in the Demo for confirmModal. Functionality wise, it’s same. I checked and saw that I have been using popModal.css and popModal.js script file in my code. Were you referring to this when you mentioned if I have removed the popModal css altogether?

7

Here is what I am asking:

My dialog is looking like this :

Is it possible using CSS to make it look like this :

Please let me know if my question is still unclear. Thanks !

9

Thanks. Any example related to that that you would like to point that out to me. That jQuery dialog is using some jquery ui related classes which I won’t be able to use in my code.

10

So you are saying that you don’t know how to style a box like that with CSS? Or you are looking for code that will display a box like that? Are you using Jquery?

11

Yes, I was looking for some code related to that as I am not perfectionist in styling with CSS which can result in similar type of box. But if styling a box from scratch is the last resort, I will try to do that.

When you say, “Are you using jQuery” : The popModal is jquery based plugin so I have jQuery 1.11.1.js version that I am using. Please let me know if you were asking something different. Thanks

12

The jquery will hide and show the box as required and if you are omitting the existing CSS for that modal then of course you can style it as you wish.

Styling the modal is no different to styling anything else but of course you have to take into account where you are placing it and how it is supposed to look and behave.

I asked it you were using the correct CSS because if you were then the confirm modal would look like this:

892Ă—382 23.3 KB

From there it would be a small step to modify the css to look as you wish.

3 Likes
13

Here is some sample styling:

	<style type="text/css">
	.box {
	font-family: Arial, Helvetica, sans-serif;
	width:90vw;
	max-width: 600px;
	border: 2px solid #bbb;
	padding:3px;
	margin: 20px;
	}
	
	.title {
	width: 100%;
	height: 40px;
	font-weight: bold;
	font-color: #666;
	}
	
	.confirm {
	width: 50%;
	height: 40px;
	font-color: #666;
	}
	
	.divider {
	display: block;
	border-top: 1px solid #bbb;
	margin: 10px 0;
	clear: both;	
	}
	
	</style>
</head>
<body>
	<div class="box">
	<button class="title">Empty the recycle bin?</button>
	These items will be permanently deleted and cannot be recovered. Are you sure?
	<span class="divider"></span>
	<button class="confirm" value="Delete all items">Delete all items</button><button class="confirm">cancel</button></div>

You’ll have to comment out the styling already there.

14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.