CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrapumbraco
OleHansen
OleHansen

Reputation: 111

Dynamic bootstrap modal

Allright i want to make my bootstrap modal dynamic but not sure how to do it.. I know i need to use @PredictioItems.Name But not sure where :(

Code:

<div style="margin-top: 55px;" class="col-sm-10 col-sm-offset-1">
        @foreach (var PredictioItems in Model.Content.Children())
        {
            if (PredictioItems.GetPropertyValue("checkboxchecker").Equals(true))
            {
                <h4 style="color: #000;">@PredictioItems.GetPropertyValue("teamvsteam")</h4>
                <strong style="color: #000;">@PredictioItems.GetPropertyValue("predictinfo")</strong><br />
                <img src="@Umbraco.TypedMedia(PredictioItems.GetPropertyValue("matchimage")).Url" />
                <p style="color: #000">@Umbraco.Truncate(PredictioItems.GetPropertyValue("predictdescription").ToString(), 25)</p>
            <button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">View full description & Livestream!</button>
                <hr />
            }

            <div id="myModal" class="modal fade" role="dialog">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">@PredictioItems.GetPropertyValue("teamvsteam")</h4>
                        </div>
                        <div class="modal-body">
                            <p>@PredictioItems.GetPropertyValue("predictdescription")</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>

                </div>
            </div>
        }
    </div>

Some one that can tell me what to replace to make it work? Thank you :)

Upvotes: 0

Views: 273

Answers (1)

Jannik Anker
Jannik Anker

Reputation: 3425

Something like this should do it - as @vel says, each possible modal "instance" has to have a unique id and the button to open it should reference that id:

<div style="margin-top: 55px;" class="col-sm-10 col-sm-offset-1">
        @foreach (var PredictioItems in Model.Content.Children())
        {
            if (PredictioItems.GetPropertyValue("checkboxchecker").Equals(true))
            {
                <h4 style="color: #000;">@PredictioItems.GetPropertyValue("teamvsteam")</h4>
                <strong style="color: #000;">@PredictioItems.GetPropertyValue("predictinfo")</strong><br />
                <img src="@Umbraco.TypedMedia(PredictioItems.GetPropertyValue("matchimage")).Url" />
                <p style="color: #000">@Umbraco.Truncate(PredictioItems.GetPropertyValue("predictdescription").ToString(), 25)</p>
            <button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal@(PredictioItems.Id)">View full description & Livestream!</button>
                <hr />
            }

            <div id="myModal@(PredictioItems.Id)" class="modal fade" role="dialog">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">@PredictioItems.GetPropertyValue("teamvsteam")</h4>
                        </div>
                        <div class="modal-body">
                            <p>@PredictioItems.GetPropertyValue("predictdescription")</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>

                </div>
            </div>
        }
    </div>

Upvotes: 1

Related Questions