Example of providing custom styles.

[SultanOrazbayev]

Thank you for the great package!

I want to tweak the style a bit, but wasn't sure what's the right way to do this. I ended up doing it like this:

from panel_modal import Modal
modal = Modal(content)
modal.style = MY_STYLE

However, since I am making a small tweak (adding overflow:auto for scroll bar)I was wondering if there's a better way.

[AnJ10]

It seems like the overall theme that is specified in the panel application is not respected by the modal class. Also when I provide a small tweak (background-color:black) in the style argument as per below example, it messes up the entire page -

import panel as pn
import hvplot.pandas  # noqa
import pandas as pd

from panel_modal import Modal

pn.extension(
    "modal",
    "plotly",
    theme="dark",
)

age_list = [8, 10, 12, 14, 72, 74, 76, 78, 20, 25, 30, 35, 60, 85]
df = pd.DataFrame({"gender": list("MMMMMMMMFFFFFF"), "age": age_list})
plot = df.hvplot.box(y='age', by='gender', height=400, width=400, legend=False, ylim=(0, None))

content = pn.Column(
    pn.pane.Markdown("## Hi. I'm a *modal*"), pn.panel(plot), sizing_mode="fixed", width=600,
    # styles={'background-color': '#212529', 'margin':"0px 0px 0px 0px"}
)
modal = Modal(content, 
              css_classes=['test'],
             )
modal.style = """background-color: blue;"""

modal_button = pn.widgets.Button(name='Modal control')

def open_modal():
    modal.open=True

modal_button.on_click(lambda x: open_modal())

layout = pn.Column(
    # modal.param.open, 
    modal,
    # modal.param.is_open, modal.param.show_close_button
)

temp = pn.template.BootstrapTemplate(
    site="Awesome Panel", site_url="./",
    title="Panel Modal",
    favicon="https://raw.githubusercontent.com/MarcSkovMadsen/awesome-panel-assets/320297ccb92773da099f6b97d267cc0433b67c23/favicon/ap-1f77b4.ico",
    main=[
        # __doc__,
        modal_button, 
          layout
         ]
)