Change mouse Cursor outside Bootstrap Modal dialog using CSS

Last Reply 5 months ago By dharmendr

Posted 5 months ago

When the modal is displayed how I can have a different mouse cursor shown when the mouse is moved outside of the modal edges?

re: Perform CRUD operation using Bootstrap Modal popup in ASP.Net MVC

Excellent article, thank you!

You are viewing reply posted by: dharmendr 5 months ago.
Posted 5 months ago

Hi dharmendr,

Set data-backdrop to static and data-keyboard to false

Which disable the closing of bootstrap modal outside the modal area.

<button type="button" class="btn btn-primary pull-right" data-toggle="modal" data-target="#modal-mrole"
    data-backdrop="static" data-keyboard="false" style="margin-right: 20px;">
    Add New Customer
</button>

And add the below css to change the cursor.

<style type="text/css">
    .in.modal-backdrop
    {
        cursor: none !important;
    }
</style>