Codechef4u is a community for computer professionals,by computer professionals,just like you; who loves sharing and helping each others,Join them
Share your post

Bootstrap popup modal as confirm dialog

 In this post i will explain in detail how to use bootstrap modal box as confirm dialog for delete or update action.  

Windows confirm

The confirm () method displays a dialog box with a specified message, along with an OK and a Cancel button.           

Problem with windows confirm

What if you want some nice design for windows confirm and want to apply CSS?

Windows confirm () alerts cannot be styled, they are generic to the browser.

What if someone wants to apply CSS to confirm box or nice design?

Answer is, use bootstrap model popup box.

How to use bootstrap confirm box for following .net MVC action?

 @Html.ActionLink("Delete", "Delete", new { id= item.id }, new { id = "btnDelete",
@class = "btn btn-sm", onclick = "return confirm('Are you sure you wish to delete?');" })

OR

<a href="@Url.Action("Update", "Products", new { ud= item.id })" id="btnUpdate" class="btn
btn-sm"  onclick="return confirm('Are you sure you wish to update?');" /> 

 

Bootstrap model box solution for windows confirm

Add following bootstrap model html code in shared layout or in same view

<!-- Modal -->
   <div class="modal fade" id="sampleModal" tabindex="-1" role="dialog" aria-labelledby="sampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
       <div class="modal-content">
     <div class="modal-header">
   <h5 class="modal-title" id="exampleModalLabel">Confirm</h5>
  <button type="button" id="btnClose" class="close" data-dismiss="modal" aria-label="Close">
           <span aria-hidden="true">&times;</span>
          </button>
       </div>
    <div id="confirmMsg" class="modal-body">
    
     </div>
  <div class="modal-footer">
 <button type="button" id="btnCancel" class="btn btn-warning" data dismiss="modal">Cancel</button>
<button type="button" id="btnOk"  class="btn btn-success">Ok</button>
     </div>
       </div>
         </div>
          </div>

 

Remove windows confirm onclick call

@Html.ActionLink("Delete", "Delete", new { id= item.id }, new { id = "btnDelete", @class = "btn btn-sm"})

OR

<a href="@Url.Action("Update", "Products", new { ud= item.id })" id="btnUpdate" class="btn btn-sm" />

 

Add bootstrap popup code in jQuery delete button Click event, same call you can create for edit action also

 

$("#btnDelete").click(function (event)
{
    var delhref = $(this).attr('href');
    var isOk = false;
    event.preventDefault();
    $("#confirmMsg").text("Are you sure you wish to delete?");
    $('#sampleModel').modal({
        backdrop: 'static',
        keyboard: false
    });
 
    $("#sampleModel").off("click").on("click", "#btnOk", function (e) {
        e.preventDefault();
        $('#sampleModel').modal("hide");
        $('#sampleModel').data("modal", null);
        isOk = true;
    });
 
    $("#btnCancel").off("click").on("click", function (e) {
        e.preventDefault();
        $("#sampleModel").modal("hide");
        $("#sampleModel").data("modal", null);
        isOk = false;
    });
 
    $("#btnClose").off("click").on("click", function (e) {
        e.preventDefault();
        $("#sampleModel").modal("hide");
        $('#sampleModel').data("modal", null);
        isOk = false;
    });
 
    $("#sampleModel").off("hidden.bs.modal").on("hidden.bs.modal", function (e) {
        e.preventDefault();
        if (isOk) {
            //here you require some customization in URl, change according to your requirement
           window.location.href = window.location.href + delhref;
        }
    })
    return isOk;
});

Good practices in CSS

When you are implementing CSS, then you must do it the right way, it should be readable, clean, reusable, and simple.

 As mentioned, there are some rules for writing clean CSS that you should try your best to avoid breaking.

In this article I will share some good practices or rules to write clean CSS, if I forgot some please share your suggestion in comment section.

1. DRY 

DRY stands for "Don't Repeat Yourself". This is a general software development principle and can be applied in any programming language, as well as in CSS.

Bad practice:

.success-button {
            background: green;
            color: white;
            border-radius: 5px;
            padding: 10px 20px;
            text-align: center;
            font-size: 16px;
        }
 
    .cancel-button {
            background: red;
            color: white;
            border-radius: 5px;
            padding: 10px 20px;
            text-align: center;
            font-size: 16px;
        }

 

Good practice:

.button {
            color: white;
            border-radius: 5px;
            padding: 10px 20px;
            text-align: center;
            font-size: 16px;
        }
 
        .cancel-button {
            background: red;
        }
 
        .success-button {
            background: green;
        }

 

Note: avoid creating duplicate CSS classes first verify common CSS rules are available for your new requirement.

2. Naming

Avoid conflicting class names, in page specific CSS if you write conflicting names your page specific CSS may override existing common template CSS

Bad:

.table .p
{
           /* CSS rules */
        }

Good practice:

.sub-table //(specific subscriber table css)
    {
            /* CSS rules */
     }

 

  .table-border //(common table border css for all template or all website pages )
     {
        /* CSS rules */
     }

3. Don't Use Inline-Styles

Well, there are arguments it can be useful in some cases, but for better readability and code maintenance avoid it.

Avoid:

<div style="font-size: 16px; color: red;">Xyz Text</div>

4. Avoid the !important tag

The! important tag has the highest specificity of all CSS selectors, always using !important to make CSS working not suggested.

Better understand order of execution of CSS styles and apply rules with proper selectors, otherwise soon our project code will be full of! important tags, which makes your CSS code much harder to maintain.

Note: The only way to override an important tag is to use another important tag.

5. Avoid complete code copy paste 

Please avoid complete copy paste CSS from third party components, complete copy pest impacts existing UI recommended to customize required code only.

6. Page/controller specific CSS

a. Don't use HTML elements as selectors in page/control/partial control specific CSS, html or DOM elements higher-specificity selectors (these types of CSS is applied in common file)

//BAD reason CSS rules applicable for all website not for specific page or control

table {
           /* CSS rules */
      }

//Recommended or good practice

.sub-table //subscriber table rules specific to control
 {
            /* CSS rules */
   }

b. Avoid conflicting class selector in control specific CSS

Bad: These common and conflicting CSS class name might be available in common CSS

.table-title {
            /* CSS rules */
        }

Suggested or good practice:

.sub-table-title {
            /* CSS rules */
         }

 

c. Use proper CSS combinator selector to apply CSS for specific element

example: id and element combination(#id.elment)  i.e #subTable.div 

element and class combination (elment.class)  div.sub-table

7. Comments 

Add readable and meaningful comments when necessary or required only, reason good CSS doesn't need comments reason it should already be clear and self-descriptive.

Bad:

// Comments for all classes

.example-class {
/* CSS rules */ 
}

Good or recommended: (add comments to logical code section or common control)

 //User control comment

 .use-class-one {
/* CSS rules */
}

 .use-class-two {

  /* CSS rules */

}

8. Shorthand CSS

Shorthand properties are CSS properties that let you set the values of multiple other CSS properties simultaneously.

Using a shorthand property, you can save time and energy.

Bad practice

/*normal css*/
img {
    margin-top: 5px;
    margin-right: 4px;
    margin-bottom: 5px;
    margin-left: 4px;
}

 

Good practice

 

/*shorthand CSS as follows*/
img {
    margin: 5px 4px;
}

 

9. Minify CSS file size with CSS Compressors

Minifying a CSS file implies the removal of unnecessary characters in the source code to reduce the file size and facilitate faster loading of the site

Following are some tools to compress CSS file

  • CSS Minify
  • Topcoat
  • Code Beautifier
  • CSS Nano
  • csscompressor.net
  • cssminifie.com

Note: Minified file is saved with “. min.css” extension for example xyzsite.min.css

10. Create cross-Browser Compatible CSS

When you use an external stylesheet (where we can use browser engine prefix like -moz-, -webkit-, -o- and -ms-) for layout and valid markup (XHTML, HTML5), then your web pages work well on all browsers such as IE, Opera, Chrome, Mozilla, and Safari.

Some browser prefix descriptions

  • -moz- /* this is use for Firefox browser*/
  • -webkit- /*this is use for chrome and safari browsers*/
  • -o- /*this is use for opera browser*/
  • -ms- /*this is use for Internet Explorer (but not always it's depends on CSS3 browser support)*/

 

Code snippet

.stop-break-out-long-text {
    /* These are technically the same, but use both */
    overflow-wrap: break-word;
    word-wrap: break-word;
     /* for IE browser*/
    -ms-word-break: break-all;
   
    word-break: break-all;
    /* Instead use this non-standard one: */
    word-break: break-word;
    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
     /* This is for Firefox browser */
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;

फिशिंग आणि डिजिटल फसवणूक

आतापर्यंत आम्ही सायबर सुरक्षेविषयी भरपूर लेख इंग्रजी मध्ये लिहले पण हा प्रथमच लेख आम्ही मराठी मध्ये प्रकाशित करत आहोत ,कारण कोरोनासारख्या महामारीत फिशिंग अटॅक पासून अनेक लोकांचे आर्थिक नुकसान आणि फसवणूक होऊ शकते हे लक्ष्यात आल्यानंतर आम्ही हा लेख लोकांपर्यंत पोहचवण्याचे ठरवले.

काय आहे हा फिशिंग प्रकार?

फिशिंग हा एक सायबर क्राइम(गुन्हा) आहे ज्यात एखाद्या व्यक्तीस वैयक्तिक माहिती, बँकिंग आणि क्रेडिट कार्ड तपशील आणि ओटीपी ,पासवर्ड ,बँक अकाउंट  यासारख्या संवेदनशील डेटा(माहिती) मिळविण्याकरीता कायदेशीर संस्था म्हणून एखाद्याद्वारे ईमेलद्वारे, टेलिफोनद्वारे किंवा मजकूर संदेशाद्वारे,व्हाट्सअप ,सोसिअल मीडिया द्वारे लक्ष्य किंवा लक्ष्यांशी संपर्क साधला जातो.

कशे होतात फिशिंग अटॅक?

१. बनावट वेबसाईट लिंक,बनावट अँप तुम्हाला काहीतरी मोह दाखवून किवां वोट, सर्वे च्या नावाखाली तुमची वयक्तिक माहिती रजिस्टर करा सांगतात आणि हि माहिती हल्लेखोरांना पाठवली जाते/किवां माहितीचा दुरुपयोग केला जातो(या सर्व बनावट लिंक आणि अँप ई-मेल , मेसेज , सोसिअल मीडियावर पाठवले जातात)

2. फसव्या लोकांकडून २५ लाखाची लॉट��ी लागली आहे/KBC ची लॉटरी आहे /एवढे हजार मिळणार म्हणून अनेक कॉल्स आणि मेसेजेस,ई-मेल येत असतात,असे कॉल्स आणि मेसेजेस फक्त तुमचे बँक अकाउंट, क्रेडिट कार्ड, बँक माहिती, ओटीपी , पासवर्ड गोळा करण्यासाठी केले जातात ..गोळा केलेली माहिती तुमचे अकाउंट मधले पैसे चोरण्यासाठी किवां आंतरराष्ट्रीय ऑनलाईन शॉपिंग मध्ये वापरले जाऊ शकतात(जो कॉल्स Voice over Internet Protocol (VoIP) प्रोटोकॅल वापरून केला जातो आणि तो संवेदनशील माहिती चोरतो अश्या हल्ल्याना विशिंग म्हणतात.)

3. एखादी बनावट वेबसाईट लिंक,app(जी तंतोतंत खऱ्या वेबसाइट, अँप सारखी दिसते फक्त त्यात सुक्ष्म फरक असतो आणि तो लोकांच्या नजरेत येत नाही) तुम्हाला ई-मेल मेसेज,व्हाट्सअप वर येते ती लिंक बनावट बँक अकाउंट/आर्थिक खाते लॉगिन पेज असते जे पीडित व्यक्तीचे लॉगिन क्रेडेन्शियल गोळा करते आणि त्यांना हल्लेखोरांना पाठवते, नंतर तुमची हि माहिती वापरून खऱ्या वेबसाईट वरून तुमचे पैसे चोरले जाऊ शकतात( DECEPTIVE फिशिंग म्हणतात )

4. बनावट लिंक डाकुमेंट्स ,वेबसाइट लिंक, अँप तुम्हाला ई-मेल मेसेज,व्हाट्सअप वर पवाठवले जातात ,तुम्ही जेव्हा यावर क्लिक करता त्यावेळी  malware हे वायरस तुमच्या कॉम्पुटर/लॅपटॉप , मोबाईल ची माहिती करप्ट(दूषित) करतात ..नंतर हल्लेखोर तुम्हाला धमकी देतो/ब्लॅकमेल करतो कि तुमचा डेटा आणि माहिती परत हवी असेल तर एवढे पैसे द्या.  

5. हल्लेखोर तुमचे ई-मेल चे पासवर्ड  चोरून त्या ई-मेल चा चुकीचा वापर करतो.

अशा प्रकारचे वेगवेगळे हल्ले ई-मेल मेसेज,सोसिअल मीडिया(व्हाट्सअप, ट्विटर,फ���सबुक इत्यादी),फोन वापरून केले जातात..

फिशिंग हल्ल्यांपासून किवां अटॅक पासून सुरक्षित कशे राहू शकतो 

१. लॉटरी आणि इतर फसव्या मेसेजेस,ई-मेल आणि फोन कॉल ना कधिच रिप्लाय करू नका.

२. जर वेबसाईट आणि अँप विश्वासू नसेल तर त्या वेबसाईट आणि अँप वरून /लिंक वरून काही पण डाउनलोड करू नका.

३. सतत तुमचा पासवर्ड बदलत राहा आणि तो कठीण आणि वेगळा असला पाहिजे, पासवर्ड कोणाला पण सांगू नका पाठवू पण नका.

४. तुमची संवेदनशील माहिती उदाहरण तुमचा ओटीपी ,पासवर्ड, कार्ड CVV कुणाला सांगू नका आणि पाठवू पण नका, कोणतीही बँक कधीच अशी माहिती मागवत नसते. 

५. जर वेबसाईट आणि अँप विश्वासू नसेल तर त्या वेबसाईट आणि अँप वर तुमची वयक्तिक माहिती रजिस्टर करू नका. 

६. फसवे वेबसाइट्स आणि app नेत्यांना वोट करा ,अनेक ऑनलाईन स्पर्धा आणि सर्वे घेत असतात फक्त विश्वासू व माहित असलेल्या लिंक्स आणि वेबसाइट्स वापरा.


धन्यवाद मित्रानो